@pallasoft/ps-core-components 2.0.0 → 2.1.1

package/dist/components/ps-badge.js

@@ -6,9 +6,9 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const toneClassNames = {
     danger: 'bg-danger-soft text-danger dark:bg-rose-500/18 dark:text-rose-100',
     neutral: 'bg-slate-100 text-slate-700 dark:bg-white/10 dark:text-slate-100',
-    primary: 'bg-primary-soft text-primary dark:bg-primary/22 dark:text-white',
+    primary: 'bg-primary-soft text-ink dark:bg-primary/22 dark:text-white',
     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, tone = 'neutral' }) => ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex min-h-8 min-w-[5.5rem] w-fit items-center justify-center rounded-full px-5 py-1 text-center text-[0.72rem] font-black capitalize tracking-[0.01em]', toneClassNames[tone], className), children: children }));
+const PsBadge = ({ children, className, tone = 'neutral' }) => ((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-full px-3 py-0.5 text-center text-xs font-semibold capitalize', toneClassNames[tone], className), children: children }));
 exports.PsBadge = PsBadge;

package/dist/components/ps-button.js

@@ -12,9 +12,9 @@ const sizeClassNames = {
 const variantClassNames = {
     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-white',
+    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',
 };
-const PsButton = ({ children, className, disabled, 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], 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 text-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: 'truncate', children: children }), trailingIcon ? (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: trailingIcon }) : null] })] }));
+const PsButton = ({ children, className, disabled, 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], 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: 'truncate', children: children }), trailingIcon ? (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: trailingIcon }) : null] })] }));
 exports.PsButton = PsButton;

package/dist/components/ps-empty-state.d.ts

@@ -12,7 +12,7 @@ export interface PsEmptyStateProps {
     badge?: string;
     className?: string;
     detail?: string;
-    description: string;
+    description?: string;
     eyebrow?: string;
     icon?: ReactNode;
     title: string;

package/dist/components/ps-empty-state.js

@@ -14,7 +14,7 @@ const PsEmptyState = ({ actions = [], badge, children, className, detail, descri
     const Wrapper = isInline ? 'div' : 'main';
     const Heading = isInline ? 'h3' : 'h1';
     return ((0, jsx_runtime_1.jsx)(Wrapper, { className: ps_design_system_1.PallasoftClassNameService.merge(isInline
-            ? 'flex items-center justify-center rounded-ps-panel border border-dashed border-line bg-mist/40 px-6 py-12 text-ink'
+            ? 'flex items-center justify-center rounded-ps-panel border border-dashed border-line bg-mist/40 px-6 py-10 text-ink'
             : 'relative flex min-h-screen items-center justify-center bg-mist px-4 py-10 text-ink', className), children: (0, jsx_runtime_1.jsx)("section", { className: isInline
                 ? 'relative w-full max-w-2xl text-center'
                 : 'ps-card relative w-full max-w-2xl p-6 sm:p-8', children: (0, jsx_runtime_1.jsxs)("div", { className: isInline
@@ -23,9 +23,9 @@ const PsEmptyState = ({ actions = [], badge, children, className, detail, descri
                                     ? 'flex flex-wrap items-center justify-center gap-2'
                                     : 'flex flex-wrap items-center gap-2', children: [eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-xs font-semibold uppercase tracking-[0.22em] text-primary', children: eyebrow })) : null, eyebrow && badge ? (0, jsx_runtime_1.jsx)("span", { className: 'h-1 w-1 rounded-full bg-line' }) : null, badge ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-xs font-semibold uppercase tracking-[0.22em] text-ink/40', children: badge })) : null] }), (0, jsx_runtime_1.jsx)(Heading, { className: isInline
                                     ? 'text-base font-semibold text-ink'
-                                    : 'mt-3 text-3xl font-semibold tracking-tight sm:text-4xl', children: title }), (0, jsx_runtime_1.jsx)("p", { className: isInline
+                                    : 'mt-3 text-3xl font-semibold tracking-tight sm:text-4xl', children: title }), description ? ((0, jsx_runtime_1.jsx)("p", { className: isInline
                                     ? 'mt-1.5 text-sm leading-6 text-ink/60'
-                                    : 'mt-3 text-sm leading-6 text-ink/60', children: description }), detail ? ((0, jsx_runtime_1.jsx)("p", { className: 'mt-4 rounded-2xl border border-line bg-mist px-4 py-3 text-left text-xs leading-5 text-ink/60', children: detail })) : null, children ? (0, jsx_runtime_1.jsx)("div", { className: 'mt-5 flex justify-center', children: children }) : null, actions.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: isInline
+                                    : 'mt-3 text-sm leading-6 text-ink/60', children: description })) : null, detail ? ((0, jsx_runtime_1.jsx)("p", { className: 'mt-4 rounded-2xl border border-line bg-mist px-4 py-3 text-left text-xs leading-5 text-ink/60', children: detail })) : null, children ? (0, jsx_runtime_1.jsx)("div", { className: 'mt-5 flex justify-center', children: children }) : null, actions.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: isInline
                                     ? 'mt-5 flex flex-col justify-center gap-2 sm:flex-row'
                                     : 'mt-6 flex flex-col gap-2 sm:flex-row', children: actions.map((action) => ((0, jsx_runtime_1.jsx)("a", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring ps-pressable inline-flex items-center justify-center rounded-ps-control border px-4 py-3 text-sm font-semibold', getActionClassName(action.variant)), href: action.href, rel: action.rel, target: action.target, children: action.label }, `${action.href}-${action.label}`))) })) : null] })] }) }) }));
 };

package/dist/components/ps-pill.js

@@ -6,7 +6,7 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const toneClassNames = {
     danger: 'bg-rose-50 text-rose-700 ring-rose-100 dark:bg-rose-500/18 dark:text-rose-100 dark:ring-rose-300/22',
     neutral: 'bg-slate-100 text-slate-700 ring-slate-200 dark:bg-white/10 dark:text-slate-100 dark:ring-white/12',
-    primary: 'bg-primary-soft text-primary ring-primary/12 dark:bg-primary/22 dark:text-white dark:ring-primary/32',
+    primary: 'bg-primary-soft text-ink ring-primary/12 dark:bg-primary/22 dark:text-white dark:ring-primary/32',
     success: 'bg-emerald-50 text-emerald-700 ring-emerald-100 dark:bg-emerald-400/18 dark:text-emerald-50 dark:ring-emerald-200/22',
     warning: 'bg-amber-50 text-amber-800 ring-amber-100 dark:bg-amber-400/18 dark:text-amber-50 dark:ring-amber-200/24',
 };

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

@@ -1,6 +1,8 @@
 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';
 }
-export declare const PsSpinner: ({ className, label, size, ...props }: PsSpinnerProps) => import("react").JSX.Element;
+export declare const PsSpinner: ({ className, color, label, size, ...props }: PsSpinnerProps) => import("react").JSX.Element;

package/dist/components/ps-spinner.js

@@ -3,10 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSpinner = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const colorClassNames = {
+    current: 'text-current',
+    primary: 'text-primary',
+};
 const sizeClassNames = {
     small: 'h-4 w-4 border-2',
     default: 'h-6 w-6 border-2',
     large: 'h-8 w-8 border-[3px]',
 };
-const PsSpinner = ({ className, label = 'Loading', size = 'default', ...props }) => ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex items-center justify-center', className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('shrink-0 animate-spin rounded-full border-current border-t-transparent text-primary', sizeClassNames[size]) }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: label })] }));
+const PsSpinner = ({ className, color = 'primary', label = 'Loading', size = 'default', ...props }) => ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex items-center justify-center', colorClassNames[color], className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('shrink-0 animate-spin rounded-full border-current border-t-transparent', sizeClassNames[size]) }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: label })] }));
 exports.PsSpinner = PsSpinner;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-core-components",
-	"version": "2.0.0",
+	"version": "2.1.1",
 	"private": false,
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",