@pallasoft/ps-core-components 2.1.0 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,9 +6,9 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
|
|
|
6
6
|
const toneClassNames = {
|
|
7
7
|
danger: 'bg-danger-soft text-danger dark:bg-rose-500/18 dark:text-rose-100',
|
|
8
8
|
neutral: 'bg-slate-100 text-slate-700 dark:bg-white/10 dark:text-slate-100',
|
|
9
|
-
primary: 'bg-primary-soft text-
|
|
9
|
+
primary: 'bg-primary-soft text-ink dark:bg-primary/22 dark:text-white',
|
|
10
10
|
success: 'bg-success-soft text-emerald-700 dark:bg-emerald-400/18 dark:text-emerald-50',
|
|
11
11
|
warning: 'bg-warning-soft text-amber-800 dark:bg-amber-400/18 dark:text-amber-50',
|
|
12
12
|
};
|
|
13
|
-
const PsBadge = ({ children, className, tone = 'neutral' }) => ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex min-h-
|
|
13
|
+
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 }));
|
|
14
14
|
exports.PsBadge = PsBadge;
|
|
@@ -12,9 +12,9 @@ const sizeClassNames = {
|
|
|
12
12
|
const variantClassNames = {
|
|
13
13
|
danger: 'border-danger bg-danger text-white hover:opacity-90',
|
|
14
14
|
ghost: 'border-transparent bg-transparent text-ink/60 hover:text-ink',
|
|
15
|
-
primary: 'border-primary bg-primary text-
|
|
15
|
+
primary: 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)] hover:border-primary-dark hover:bg-primary-dark',
|
|
16
16
|
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',
|
|
17
17
|
surface: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
|
|
18
18
|
};
|
|
19
|
-
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
|
|
19
|
+
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] })] }));
|
|
20
20
|
exports.PsButton = PsButton;
|
|
@@ -6,7 +6,7 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
|
|
|
6
6
|
const toneClassNames = {
|
|
7
7
|
danger: 'bg-rose-50 text-rose-700 ring-rose-100 dark:bg-rose-500/18 dark:text-rose-100 dark:ring-rose-300/22',
|
|
8
8
|
neutral: 'bg-slate-100 text-slate-700 ring-slate-200 dark:bg-white/10 dark:text-slate-100 dark:ring-white/12',
|
|
9
|
-
primary: 'bg-primary-soft text-
|
|
9
|
+
primary: 'bg-primary-soft text-ink ring-primary/12 dark:bg-primary/22 dark:text-white dark:ring-primary/32',
|
|
10
10
|
success: 'bg-emerald-50 text-emerald-700 ring-emerald-100 dark:bg-emerald-400/18 dark:text-emerald-50 dark:ring-emerald-200/22',
|
|
11
11
|
warning: 'bg-amber-50 text-amber-800 ring-amber-100 dark:bg-amber-400/18 dark:text-amber-50 dark:ring-amber-200/24',
|
|
12
12
|
};
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import type { HTMLAttributes } from 'react';
|
|
2
2
|
export interface PsSpinnerProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
/** `current` follows the surrounding text colour, for spinners inside buttons. */
|
|
4
|
+
color?: 'current' | 'primary';
|
|
3
5
|
label?: string;
|
|
4
6
|
size?: 'default' | 'large' | 'small';
|
|
5
7
|
}
|
|
6
|
-
export declare const PsSpinner: ({ className, label, size, ...props }: PsSpinnerProps) => import("react").JSX.Element;
|
|
8
|
+
export declare const PsSpinner: ({ className, color, label, size, ...props }: PsSpinnerProps) => import("react").JSX.Element;
|
|
@@ -3,10 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.PsSpinner = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const ps_design_system_1 = require("@pallasoft/ps-design-system");
|
|
6
|
+
const colorClassNames = {
|
|
7
|
+
current: 'text-current',
|
|
8
|
+
primary: 'text-primary',
|
|
9
|
+
};
|
|
6
10
|
const sizeClassNames = {
|
|
7
11
|
small: 'h-4 w-4 border-2',
|
|
8
12
|
default: 'h-6 w-6 border-2',
|
|
9
13
|
large: 'h-8 w-8 border-[3px]',
|
|
10
14
|
};
|
|
11
|
-
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
|
|
15
|
+
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 })] }));
|
|
12
16
|
exports.PsSpinner = PsSpinner;
|