@pallasoft/ps-core-components 2.15.1 → 2.15.3

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

@@ -10,7 +10,7 @@ const logoLinkClassName = 'flex shrink-0 items-center gap-2.5';
 const PsSiteHeader = ({ centerContent, className, homeHref, label, LinkComponent, logoAlt, logoClassName, logoSrc, logoSrcDark, logoSrcMobile, logoSrcMobileDark, navClassName, onBack, showLabel = false, trailing, }) => {
     const headerRef = (0, use_ps_published_height_1.usePsPublishedHeight)(ps_site_header_config_1.PsSiteHeaderConfig.heightVariable);
     const logoLabel = `${label} home`;
-    const renderLogo = (src, darkSrc, baseClassName) => darkSrc ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, 'dark:hidden', logoClassName), decoding: 'async', fetchPriority: 'high', src: src }), (0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, 'hidden dark:block', logoClassName), decoding: 'async', fetchPriority: 'high', src: darkSrc })] })) : ((0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, logoClassName), decoding: 'async', fetchPriority: 'high', src: src }));
+    const renderLogo = (src, darkSrc, baseClassName) => darkSrc ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, 'dark:hidden', logoClassName), decoding: 'async', src: src }), (0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, 'hidden dark:block', logoClassName), decoding: 'async', src: darkSrc })] })) : ((0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, logoClassName), decoding: 'async', src: src }));
     const logoContent = logoSrcMobile ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'hidden sm:contents', children: renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto') }), (0, jsx_runtime_1.jsx)("span", { className: 'contents sm:hidden', children: renderLogo(logoSrcMobile, logoSrcMobileDark, 'h-8 w-auto') }), showLabel ? (0, jsx_runtime_1.jsx)("span", { className: 'text-base font-bold text-ink', children: label }) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto'), showLabel ? (0, jsx_runtime_1.jsx)("span", { className: 'text-base font-bold text-ink', children: label }) : null] }));
     const logoLink = LinkComponent ? ((0, jsx_runtime_1.jsx)(LinkComponent, { "aria-label": logoLabel, className: logoLinkClassName, prefetch: 'intent', to: homeHref, children: logoContent })) : ((0, jsx_runtime_1.jsx)("a", { "aria-label": logoLabel, className: logoLinkClassName, href: homeHref, children: logoContent }));
     return ((0, jsx_runtime_1.jsx)("header", { ref: headerRef, className: ps_design_system_1.PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: (0, jsx_runtime_1.jsxs)("nav", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? ((0, jsx_runtime_1.jsx)("button", { "aria-label": 'Back', className: 'ps-focus-ring flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink md:hidden', onClick: onBack, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { iconKey: ps_icons_1.PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));

package/dist/components/ps-skeleton.js

@@ -5,12 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_skeleton_config_1 = require("../constants/ps-skeleton-config");
 const ps_skeleton_shape_1 = require("../constants/ps-skeleton-shape");
-const shapeClassNames = {
-    [ps_skeleton_shape_1.PsSkeletonShape.Block]: 'h-11 w-full rounded-ps-control',
-    [ps_skeleton_shape_1.PsSkeletonShape.Circle]: 'h-9 w-9 shrink-0 rounded-full',
-    [ps_skeleton_shape_1.PsSkeletonShape.Line]: 'h-3 w-full rounded-full',
-    [ps_skeleton_shape_1.PsSkeletonShape.Text]: 'h-3 w-full rounded-full',
-};
+const ps_skeleton_class_service_1 = require("../services/ps-skeleton-class-service");
 const sizeStyle = (props) => {
     const style = {};
     if (props.width !== undefined)
@@ -30,10 +25,10 @@ const PsSkeleton = ({ shape = ps_skeleton_shape_1.PsSkeletonShape.Line, ...props
     const style = sizeStyle(props);
     if (shape === ps_skeleton_shape_1.PsSkeletonShape.Text) {
         const lines = props.lines !== undefined ? props.lines : ps_skeleton_config_1.PsSkeletonConfig.defaultTextLines;
-        return ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-2.5', props.className), children: Array.from({ length: lines }, (item, index) => ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('ps-skeleton', shapeClassNames[ps_skeleton_shape_1.PsSkeletonShape.Line], index === lines - 1 && lines > 1
+        return ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-2.5', props.className), children: Array.from({ length: lines }, (item, index) => ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: ps_skeleton_class_service_1.PsSkeletonClassService.resolve(ps_skeleton_shape_1.PsSkeletonShape.Line, index === lines - 1 && lines > 1
                     ? ps_skeleton_config_1.PsSkeletonConfig.lastLineWidth
                     : ps_skeleton_config_1.PsSkeletonConfig.lineWidths[index % ps_skeleton_config_1.PsSkeletonConfig.lineWidths.length]), style: style }, index))) }));
     }
-    return ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('ps-skeleton', shapeClassNames[shape], props.className), style: style }));
+    return ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: ps_skeleton_class_service_1.PsSkeletonClassService.resolve(shape, props.className), style: style }));
 };
 exports.PsSkeleton = PsSkeleton;

package/dist/constants/ps-skeleton-config.d.ts

@@ -1,5 +1,15 @@
+import type { PsSkeletonSize } from '../models/ps-skeleton-size';
+import { PsSkeletonShape } from './ps-skeleton-shape';
 export declare const PsSkeletonConfig: {
     readonly defaultTextLines: 3;
     readonly lastLineWidth: "w-2/3";
     readonly lineWidths: readonly ["w-3/4", "w-1/2", "w-5/6", "w-2/3"];
+    readonly baseClassName: "ps-skeleton";
+    readonly classSeparator: RegExp;
+    readonly variantSeparator: ":";
+    readonly importantPrefix: "!";
+    readonly widthUtilityPattern: RegExp;
+    readonly heightUtilityPattern: RegExp;
+    readonly shapeClassNames: Record<PsSkeletonShape, string>;
+    readonly shapeSizes: Record<PsSkeletonShape, PsSkeletonSize>;
 };

package/dist/constants/ps-skeleton-config.js

@@ -1,8 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSkeletonConfig = void 0;
+const ps_skeleton_shape_1 = require("./ps-skeleton-shape");
 exports.PsSkeletonConfig = {
     defaultTextLines: 3,
     lastLineWidth: 'w-2/3',
     lineWidths: ['w-3/4', 'w-1/2', 'w-5/6', 'w-2/3'],
+    baseClassName: 'ps-skeleton',
+    classSeparator: /\s+/,
+    variantSeparator: ':',
+    importantPrefix: '!',
+    widthUtilityPattern: /^(w|size)-/,
+    heightUtilityPattern: /^(h|size)-/,
+    shapeClassNames: {
+        [ps_skeleton_shape_1.PsSkeletonShape.Block]: 'rounded-ps-control',
+        [ps_skeleton_shape_1.PsSkeletonShape.Circle]: 'shrink-0 rounded-full',
+        [ps_skeleton_shape_1.PsSkeletonShape.Line]: 'rounded-full',
+        [ps_skeleton_shape_1.PsSkeletonShape.Text]: 'rounded-full',
+    },
+    shapeSizes: {
+        [ps_skeleton_shape_1.PsSkeletonShape.Block]: { height: 'h-11', width: 'w-full' },
+        [ps_skeleton_shape_1.PsSkeletonShape.Circle]: { height: 'h-9', width: 'w-9' },
+        [ps_skeleton_shape_1.PsSkeletonShape.Line]: { height: 'h-3', width: 'w-full' },
+        [ps_skeleton_shape_1.PsSkeletonShape.Text]: { height: 'h-3', width: 'w-full' },
+    },
 };

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

@@ -74,15 +74,15 @@ exports.PsVoiceOrbCadenceByState = {
 };
 exports.PsVoiceOrbThemes = {
     default: {
-        glass: 'radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.16), transparent 42%), radial-gradient(circle, rgb(var(--ps-color-primary-rgb) / 0.2), rgb(var(--ps-color-ink-rgb) / 0.94) 75%)',
-        rim: 'conic-gradient(rgb(var(--ps-color-primary-rgb)), rgb(var(--ps-color-accent-rgb)), rgb(var(--ps-color-secondary-rgb)), rgb(var(--ps-color-primary-dark-rgb)), rgb(var(--ps-color-primary-rgb)))',
-        ripple: 'rgb(var(--ps-color-primary-rgb) / 0.5)',
-        core: 'radial-gradient(circle, rgb(255 255 255 / 0.9), rgb(var(--ps-color-accent-rgb) / 0.7) 35%, transparent 70%)',
+        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)))',
+        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%)',
     },
     error: {
-        glass: 'radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.16), transparent 42%), radial-gradient(circle, rgb(var(--ps-color-danger-rgb) / 0.22), rgb(var(--ps-color-ink-rgb) / 0.94) 75%)',
+        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%)',
         rim: 'conic-gradient(rgb(var(--ps-color-danger-rgb)), rgb(255 255 255 / 0.85), rgb(var(--ps-color-danger-rgb) / 0.7), rgb(var(--ps-color-danger-rgb)))',
-        ripple: 'rgb(var(--ps-color-danger-rgb) / 0.5)',
-        core: 'radial-gradient(circle, rgb(255 255 255 / 0.9), rgb(var(--ps-color-danger-rgb) / 0.7) 35%, transparent 70%)',
+        ripple: 'rgb(var(--ps-color-danger-rgb) / 0.6)',
+        core: 'radial-gradient(circle, rgb(255 255 255), rgb(var(--ps-color-danger-rgb) / 0.7) 35%, transparent 70%)',
     },
 };

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

@@ -7,7 +7,7 @@ const logoLinkClassName = 'flex shrink-0 items-center gap-2.5';
 export const PsSiteHeader = ({ centerContent, className, homeHref, label, LinkComponent, logoAlt, logoClassName, logoSrc, logoSrcDark, logoSrcMobile, logoSrcMobileDark, navClassName, onBack, showLabel = false, trailing, }) => {
     const headerRef = usePsPublishedHeight(PsSiteHeaderConfig.heightVariable);
     const logoLabel = `${label} home`;
-    const renderLogo = (src, darkSrc, baseClassName) => darkSrc ? (_jsxs(_Fragment, { children: [_jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, 'dark:hidden', logoClassName), decoding: 'async', fetchPriority: 'high', src: src }), _jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, 'hidden dark:block', logoClassName), decoding: 'async', fetchPriority: 'high', src: darkSrc })] })) : (_jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, logoClassName), decoding: 'async', fetchPriority: 'high', src: src }));
+    const renderLogo = (src, darkSrc, baseClassName) => darkSrc ? (_jsxs(_Fragment, { children: [_jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, 'dark:hidden', logoClassName), decoding: 'async', src: src }), _jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, 'hidden dark:block', logoClassName), decoding: 'async', src: darkSrc })] })) : (_jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, logoClassName), decoding: 'async', src: src }));
     const logoContent = logoSrcMobile ? (_jsxs(_Fragment, { children: [_jsx("span", { className: 'hidden sm:contents', children: renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto') }), _jsx("span", { className: 'contents sm:hidden', children: renderLogo(logoSrcMobile, logoSrcMobileDark, 'h-8 w-auto') }), showLabel ? _jsx("span", { className: 'text-base font-bold text-ink', children: label }) : null] })) : (_jsxs(_Fragment, { children: [renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto'), showLabel ? _jsx("span", { className: 'text-base font-bold text-ink', children: label }) : null] }));
     const logoLink = LinkComponent ? (_jsx(LinkComponent, { "aria-label": logoLabel, className: logoLinkClassName, prefetch: 'intent', to: homeHref, children: logoContent })) : (_jsx("a", { "aria-label": logoLabel, className: logoLinkClassName, href: homeHref, children: logoContent }));
     return (_jsx("header", { ref: headerRef, className: PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: _jsxs("nav", { className: PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? (_jsx("button", { "aria-label": 'Back', className: 'ps-focus-ring flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink md:hidden', onClick: onBack, type: 'button', children: _jsx(PsIcon, { iconKey: PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, _jsx("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), _jsx("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? _jsx("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));

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

@@ -2,12 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsSkeletonConfig } from '../constants/ps-skeleton-config';
 import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
-const shapeClassNames = {
-    [PsSkeletonShape.Block]: 'h-11 w-full rounded-ps-control',
-    [PsSkeletonShape.Circle]: 'h-9 w-9 shrink-0 rounded-full',
-    [PsSkeletonShape.Line]: 'h-3 w-full rounded-full',
-    [PsSkeletonShape.Text]: 'h-3 w-full rounded-full',
-};
+import { PsSkeletonClassService } from '../services/ps-skeleton-class-service';
 const sizeStyle = (props) => {
     const style = {};
     if (props.width !== undefined)
@@ -27,9 +22,9 @@ export const PsSkeleton = ({ shape = PsSkeletonShape.Line, ...props }) => {
     const style = sizeStyle(props);
     if (shape === PsSkeletonShape.Text) {
         const lines = props.lines !== undefined ? props.lines : PsSkeletonConfig.defaultTextLines;
-        return (_jsx("span", { className: PallasoftClassNameService.merge('flex flex-col gap-2.5', props.className), children: Array.from({ length: lines }, (item, index) => (_jsx("span", { "aria-hidden": 'true', className: PallasoftClassNameService.merge('ps-skeleton', shapeClassNames[PsSkeletonShape.Line], index === lines - 1 && lines > 1
+        return (_jsx("span", { className: PallasoftClassNameService.merge('flex flex-col gap-2.5', props.className), children: Array.from({ length: lines }, (item, index) => (_jsx("span", { "aria-hidden": 'true', className: PsSkeletonClassService.resolve(PsSkeletonShape.Line, index === lines - 1 && lines > 1
                     ? PsSkeletonConfig.lastLineWidth
                     : PsSkeletonConfig.lineWidths[index % PsSkeletonConfig.lineWidths.length]), style: style }, index))) }));
     }
-    return (_jsx("span", { "aria-hidden": 'true', className: PallasoftClassNameService.merge('ps-skeleton', shapeClassNames[shape], props.className), style: style }));
+    return (_jsx("span", { "aria-hidden": 'true', className: PsSkeletonClassService.resolve(shape, props.className), style: style }));
 };

package/dist/esm/constants/ps-skeleton-config.js

@@ -1,5 +1,24 @@
+import { PsSkeletonShape } from './ps-skeleton-shape';
 export const PsSkeletonConfig = {
     defaultTextLines: 3,
     lastLineWidth: 'w-2/3',
     lineWidths: ['w-3/4', 'w-1/2', 'w-5/6', 'w-2/3'],
+    baseClassName: 'ps-skeleton',
+    classSeparator: /\s+/,
+    variantSeparator: ':',
+    importantPrefix: '!',
+    widthUtilityPattern: /^(w|size)-/,
+    heightUtilityPattern: /^(h|size)-/,
+    shapeClassNames: {
+        [PsSkeletonShape.Block]: 'rounded-ps-control',
+        [PsSkeletonShape.Circle]: 'shrink-0 rounded-full',
+        [PsSkeletonShape.Line]: 'rounded-full',
+        [PsSkeletonShape.Text]: 'rounded-full',
+    },
+    shapeSizes: {
+        [PsSkeletonShape.Block]: { height: 'h-11', width: 'w-full' },
+        [PsSkeletonShape.Circle]: { height: 'h-9', width: 'w-9' },
+        [PsSkeletonShape.Line]: { height: 'h-3', width: 'w-full' },
+        [PsSkeletonShape.Text]: { height: 'h-3', width: 'w-full' },
+    },
 };

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

@@ -71,15 +71,15 @@ export const PsVoiceOrbCadenceByState = {
 };
 export const PsVoiceOrbThemes = {
     default: {
-        glass: 'radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.16), transparent 42%), radial-gradient(circle, rgb(var(--ps-color-primary-rgb) / 0.2), rgb(var(--ps-color-ink-rgb) / 0.94) 75%)',
-        rim: 'conic-gradient(rgb(var(--ps-color-primary-rgb)), rgb(var(--ps-color-accent-rgb)), rgb(var(--ps-color-secondary-rgb)), rgb(var(--ps-color-primary-dark-rgb)), rgb(var(--ps-color-primary-rgb)))',
-        ripple: 'rgb(var(--ps-color-primary-rgb) / 0.5)',
-        core: 'radial-gradient(circle, rgb(255 255 255 / 0.9), rgb(var(--ps-color-accent-rgb) / 0.7) 35%, transparent 70%)',
+        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)))',
+        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%)',
     },
     error: {
-        glass: 'radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.16), transparent 42%), radial-gradient(circle, rgb(var(--ps-color-danger-rgb) / 0.22), rgb(var(--ps-color-ink-rgb) / 0.94) 75%)',
+        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%)',
         rim: 'conic-gradient(rgb(var(--ps-color-danger-rgb)), rgb(255 255 255 / 0.85), rgb(var(--ps-color-danger-rgb) / 0.7), rgb(var(--ps-color-danger-rgb)))',
-        ripple: 'rgb(var(--ps-color-danger-rgb) / 0.5)',
-        core: 'radial-gradient(circle, rgb(255 255 255 / 0.9), rgb(var(--ps-color-danger-rgb) / 0.7) 35%, transparent 70%)',
+        ripple: 'rgb(var(--ps-color-danger-rgb) / 0.6)',
+        core: 'radial-gradient(circle, rgb(255 255 255), rgb(var(--ps-color-danger-rgb) / 0.7) 35%, transparent 70%)',
     },
 };

package/dist/esm/index.js

@@ -24,6 +24,8 @@ export * from './hooks/use-ps-published-height';
 export * from './constants/ps-scaled-preview-config';
 export * from './constants/ps-site-header-config';
 export * from './components/ps-skeleton';
+export * from './services/ps-skeleton-class-service';
+export * from './models/ps-skeleton-size';
 export * from './constants/ps-skeleton-shape';
 export * from './components/ps-skeleton-card';
 export * from './components/ps-skeleton-group';

package/dist/esm/models/ps-skeleton-size.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/services/ps-skeleton-class-service.js

@@ -0,0 +1,19 @@
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeletonConfig } from '../constants/ps-skeleton-config';
+export class PsSkeletonClassService {
+    static resolve(shape, className) {
+        const utilities = className
+            ? className
+                .split(PsSkeletonConfig.classSeparator)
+                .filter((token) => !token.includes(PsSkeletonConfig.variantSeparator))
+                .map((token) => PsSkeletonClassService.withoutImportant(token))
+            : [];
+        const hasWidth = utilities.some((utility) => PsSkeletonConfig.widthUtilityPattern.test(utility));
+        const hasHeight = utilities.some((utility) => PsSkeletonConfig.heightUtilityPattern.test(utility));
+        const size = PsSkeletonConfig.shapeSizes[shape];
+        return PallasoftClassNameService.merge(PsSkeletonConfig.baseClassName, PsSkeletonConfig.shapeClassNames[shape], hasHeight ? null : size.height, hasWidth ? null : size.width, className);
+    }
+    static withoutImportant(token) {
+        return token.startsWith(PsSkeletonConfig.importantPrefix) ? token.slice(1) : token;
+    }
+}

package/dist/index.d.ts

@@ -24,6 +24,8 @@ export * from './hooks/use-ps-published-height';
 export * from './constants/ps-scaled-preview-config';
 export * from './constants/ps-site-header-config';
 export * from './components/ps-skeleton';
+export * from './services/ps-skeleton-class-service';
+export * from './models/ps-skeleton-size';
 export * from './constants/ps-skeleton-shape';
 export * from './components/ps-skeleton-card';
 export * from './components/ps-skeleton-group';

package/dist/index.js

@@ -40,6 +40,8 @@ __exportStar(require("./hooks/use-ps-published-height"), exports);
 __exportStar(require("./constants/ps-scaled-preview-config"), exports);
 __exportStar(require("./constants/ps-site-header-config"), exports);
 __exportStar(require("./components/ps-skeleton"), exports);
+__exportStar(require("./services/ps-skeleton-class-service"), exports);
+__exportStar(require("./models/ps-skeleton-size"), exports);
 __exportStar(require("./constants/ps-skeleton-shape"), exports);
 __exportStar(require("./components/ps-skeleton-card"), exports);
 __exportStar(require("./components/ps-skeleton-group"), exports);

package/dist/models/ps-skeleton-size.d.ts

@@ -0,0 +1,4 @@
+export interface PsSkeletonSize {
+    height: string;
+    width: string;
+}

package/dist/models/ps-skeleton-size.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/services/ps-skeleton-class-service.d.ts

@@ -0,0 +1,5 @@
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
+export declare class PsSkeletonClassService {
+    static resolve(shape: PsSkeletonShape, className?: string): string;
+    private static withoutImportant;
+}

package/dist/services/ps-skeleton-class-service.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSkeletonClassService = void 0;
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_skeleton_config_1 = require("../constants/ps-skeleton-config");
+class PsSkeletonClassService {
+    static resolve(shape, className) {
+        const utilities = className
+            ? className
+                .split(ps_skeleton_config_1.PsSkeletonConfig.classSeparator)
+                .filter((token) => !token.includes(ps_skeleton_config_1.PsSkeletonConfig.variantSeparator))
+                .map((token) => PsSkeletonClassService.withoutImportant(token))
+            : [];
+        const hasWidth = utilities.some((utility) => ps_skeleton_config_1.PsSkeletonConfig.widthUtilityPattern.test(utility));
+        const hasHeight = utilities.some((utility) => ps_skeleton_config_1.PsSkeletonConfig.heightUtilityPattern.test(utility));
+        const size = ps_skeleton_config_1.PsSkeletonConfig.shapeSizes[shape];
+        return ps_design_system_1.PallasoftClassNameService.merge(ps_skeleton_config_1.PsSkeletonConfig.baseClassName, ps_skeleton_config_1.PsSkeletonConfig.shapeClassNames[shape], hasHeight ? null : size.height, hasWidth ? null : size.width, className);
+    }
+    static withoutImportant(token) {
+        return token.startsWith(ps_skeleton_config_1.PsSkeletonConfig.importantPrefix) ? token.slice(1) : token;
+    }
+}
+exports.PsSkeletonClassService = PsSkeletonClassService;

package/package.json

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