@pallasoft/ps-core-components 2.15.2 → 2.15.4

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/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/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.2",
+	"version": "2.15.4",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -9,7 +9,6 @@
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
-			"import": "./dist/esm/index.js",
 			"module": "./dist/esm/index.js",
 			"require": "./dist/index.js",
 			"default": "./dist/index.js"