@pallasoft/ps-core-components 2.4.0 → 2.5.0

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

@@ -0,0 +1,4 @@
+export interface PsSkeletonCardProps {
+    className?: string;
+}
+export declare const PsSkeletonCard: ({ className }: PsSkeletonCardProps) => import("react").JSX.Element;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSkeletonCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_skeleton_1 = require("./ps-skeleton");
+const ps_skeleton_group_1 = require("./ps-skeleton-group");
+const PsSkeletonCard = ({ className }) => ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-3 rounded-[1.25rem] border border-line bg-surface p-5', className), children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-24' }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-6 w-32' })] }));
+exports.PsSkeletonCard = PsSkeletonCard;

package/dist/components/ps-skeleton-group.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface PsSkeletonGroupProps {
+    children: ReactNode;
+    className?: string;
+    label?: string;
+}
+export declare const PsSkeletonGroup: ({ children, className, label, }: PsSkeletonGroupProps) => import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSkeletonGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PsSkeletonGroup = ({ children, className, label = 'Loading', }) => ((0, jsx_runtime_1.jsxs)("div", { "aria-busy": 'true', className: className, role: 'status', children: [(0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: label }), children] }));
+exports.PsSkeletonGroup = PsSkeletonGroup;

package/dist/components/ps-skeleton-list.d.ts

@@ -0,0 +1,8 @@
+export interface PsSkeletonListProps {
+    className?: string;
+    hasLeading?: boolean;
+    hasTrailing?: boolean;
+    rows?: number;
+    title?: boolean;
+}
+export declare const PsSkeletonList: ({ className, hasLeading, hasTrailing, rows, title, }: PsSkeletonListProps) => import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSkeletonList = void 0;
+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_1 = require("./ps-skeleton");
+const ps_skeleton_group_1 = require("./ps-skeleton-group");
+const PsSkeletonList = ({ className, hasLeading = false, hasTrailing = true, rows = 4, title = false, }) => ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col', className), children: [title ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'mx-3 mb-3 h-2.5 w-24' }) : null, Array.from({ length: rows }, (_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex min-h-11 items-center gap-3 px-3 py-2.5', children: [hasLeading ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { shape: 'circle' }) : null, (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_skeleton_config_1.PsSkeletonConfig.lineWidths[index % ps_skeleton_config_1.PsSkeletonConfig.lineWidths.length] }), hasTrailing ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'ml-auto h-2.5 w-20 shrink-0' }) : null] }, index)))] }));
+exports.PsSkeletonList = PsSkeletonList;

package/dist/components/ps-skeleton-table.d.ts

@@ -0,0 +1,7 @@
+export interface PsSkeletonTableProps {
+    className?: string;
+    columns?: number;
+    hasToolbar?: boolean;
+    rows?: number;
+}
+export declare const PsSkeletonTable: ({ className, columns, hasToolbar, rows, }: PsSkeletonTableProps) => import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSkeletonTable = void 0;
+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_1 = require("./ps-skeleton");
+const ps_skeleton_group_1 = require("./ps-skeleton-group");
+const PsSkeletonTable = ({ className, columns = 4, hasToolbar = false, rows = 6, }) => {
+    const gridTemplateColumns = `minmax(0, 2fr) repeat(${Math.max(columns - 1, 0)}, minmax(0, 1fr))`;
+    return ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-3', className), children: [hasToolbar ? ((0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-3', children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'max-w-sm', shape: 'block' }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'ml-auto w-24', shape: 'block' })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [(0, jsx_runtime_1.jsx)("div", { className: 'grid gap-4 bg-mist/70 px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (_, index) => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-16' }, index))) }), Array.from({ length: rows }, (_, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { className: 'grid items-center gap-4 border-t border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: columnIndex === columns - 1 && columns > 1
+                                ? 'ml-auto w-16'
+                                : ps_skeleton_config_1.PsSkeletonConfig.lineWidths[(rowIndex + columnIndex) % ps_skeleton_config_1.PsSkeletonConfig.lineWidths.length] }, columnIndex))) }, rowIndex)))] })] }));
+};
+exports.PsSkeletonTable = PsSkeletonTable;

package/dist/components/ps-skeleton-text.d.ts

@@ -0,0 +1,5 @@
+export interface PsSkeletonTextProps {
+    className?: string;
+    lines?: number;
+}
+export declare const PsSkeletonText: ({ className, lines }: PsSkeletonTextProps) => import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSkeletonText = void 0;
+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_1 = require("./ps-skeleton");
+const ps_skeleton_group_1 = require("./ps-skeleton-group");
+const PsSkeletonText = ({ className, lines = 3 }) => ((0, jsx_runtime_1.jsx)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-2.5', className), children: Array.from({ length: lines }, (_, index) => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: index === lines - 1 && lines > 1
+            ? 'w-2/3'
+            : ps_skeleton_config_1.PsSkeletonConfig.lineWidths[index % ps_skeleton_config_1.PsSkeletonConfig.lineWidths.length] }, index))) }));
+exports.PsSkeletonText = PsSkeletonText;

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

@@ -1,4 +1,6 @@
+export type PsSkeletonShape = 'block' | 'circle' | 'line';
 export interface PsSkeletonProps {
     className?: string;
+    shape?: PsSkeletonShape;
 }
-export declare const PsSkeleton: ({ className }: PsSkeletonProps) => import("react").JSX.Element;
+export declare const PsSkeleton: ({ className, shape }: PsSkeletonProps) => import("react").JSX.Element;

package/dist/components/ps-skeleton.js

@@ -3,5 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSkeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsSkeleton = ({ className }) => ((0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('animate-pulse rounded-full bg-mist', className) }));
+const shapeClassNames = {
+    block: 'h-11 w-full rounded-ps-control',
+    circle: 'h-9 w-9 shrink-0 rounded-full',
+    line: 'h-3 w-full rounded-full',
+};
+const PsSkeleton = ({ className, shape = 'line' }) => ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('ps-skeleton', shapeClassNames[shape], className) }));
 exports.PsSkeleton = PsSkeleton;

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

@@ -0,0 +1,3 @@
+export declare const PsSkeletonConfig: {
+    readonly lineWidths: readonly ["w-3/4", "w-1/2", "w-5/6", "w-2/3"];
+};

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSkeletonConfig = void 0;
+exports.PsSkeletonConfig = {
+    lineWidths: ['w-3/4', 'w-1/2', 'w-5/6', 'w-2/3'],
+};

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeleton } from './ps-skeleton';
+import { PsSkeletonGroup } from './ps-skeleton-group';
+export const PsSkeletonCard = ({ className }) => (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('flex flex-col gap-3 rounded-[1.25rem] border border-line bg-surface p-5', className), children: [_jsx(PsSkeleton, { className: 'h-2.5 w-24' }), _jsx(PsSkeleton, { className: 'h-6 w-32' })] }));

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

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PsSkeletonGroup = ({ children, className, label = 'Loading', }) => (_jsxs("div", { "aria-busy": 'true', className: className, role: 'status', children: [_jsx("span", { className: 'sr-only', children: label }), children] }));

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeletonConfig } from '../constants/ps-skeleton-config';
+import { PsSkeleton } from './ps-skeleton';
+import { PsSkeletonGroup } from './ps-skeleton-group';
+export const PsSkeletonList = ({ className, hasLeading = false, hasTrailing = true, rows = 4, title = false, }) => (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('flex flex-col', className), children: [title ? _jsx(PsSkeleton, { className: 'mx-3 mb-3 h-2.5 w-24' }) : null, Array.from({ length: rows }, (_, index) => (_jsxs("div", { className: 'flex min-h-11 items-center gap-3 px-3 py-2.5', children: [hasLeading ? _jsx(PsSkeleton, { shape: 'circle' }) : null, _jsx(PsSkeleton, { className: PsSkeletonConfig.lineWidths[index % PsSkeletonConfig.lineWidths.length] }), hasTrailing ? _jsx(PsSkeleton, { className: 'ml-auto h-2.5 w-20 shrink-0' }) : null] }, index)))] }));

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeletonConfig } from '../constants/ps-skeleton-config';
+import { PsSkeleton } from './ps-skeleton';
+import { PsSkeletonGroup } from './ps-skeleton-group';
+export const PsSkeletonTable = ({ className, columns = 4, hasToolbar = false, rows = 6, }) => {
+    const gridTemplateColumns = `minmax(0, 2fr) repeat(${Math.max(columns - 1, 0)}, minmax(0, 1fr))`;
+    return (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('flex flex-col gap-3', className), children: [hasToolbar ? (_jsxs("div", { className: 'flex items-center gap-3', children: [_jsx(PsSkeleton, { className: 'max-w-sm', shape: 'block' }), _jsx(PsSkeleton, { className: 'ml-auto w-24', shape: 'block' })] })) : null, _jsxs("div", { className: 'overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [_jsx("div", { className: 'grid gap-4 bg-mist/70 px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (_, index) => (_jsx(PsSkeleton, { className: 'h-2.5 w-16' }, index))) }), Array.from({ length: rows }, (_, rowIndex) => (_jsx("div", { className: 'grid items-center gap-4 border-t border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => (_jsx(PsSkeleton, { className: columnIndex === columns - 1 && columns > 1
+                                ? 'ml-auto w-16'
+                                : PsSkeletonConfig.lineWidths[(rowIndex + columnIndex) % PsSkeletonConfig.lineWidths.length] }, columnIndex))) }, rowIndex)))] })] }));
+};

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeletonConfig } from '../constants/ps-skeleton-config';
+import { PsSkeleton } from './ps-skeleton';
+import { PsSkeletonGroup } from './ps-skeleton-group';
+export const PsSkeletonText = ({ className, lines = 3 }) => (_jsx(PsSkeletonGroup, { className: PallasoftClassNameService.merge('flex flex-col gap-2.5', className), children: Array.from({ length: lines }, (_, index) => (_jsx(PsSkeleton, { className: index === lines - 1 && lines > 1
+            ? 'w-2/3'
+            : PsSkeletonConfig.lineWidths[index % PsSkeletonConfig.lineWidths.length] }, index))) }));

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

@@ -1,3 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-export const PsSkeleton = ({ className }) => (_jsx("div", { className: PallasoftClassNameService.merge('animate-pulse rounded-full bg-mist', className) }));
+const shapeClassNames = {
+    block: 'h-11 w-full rounded-ps-control',
+    circle: 'h-9 w-9 shrink-0 rounded-full',
+    line: 'h-3 w-full rounded-full',
+};
+export const PsSkeleton = ({ className, shape = 'line' }) => (_jsx("span", { "aria-hidden": 'true', className: PallasoftClassNameService.merge('ps-skeleton', shapeClassNames[shape], className) }));

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

@@ -0,0 +1,3 @@
+export const PsSkeletonConfig = {
+    lineWidths: ['w-3/4', 'w-1/2', 'w-5/6', 'w-2/3'],
+};

package/dist/esm/index.js

@@ -18,6 +18,11 @@ export * from './components/ps-navigation-progress';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';
 export * from './components/ps-skeleton';
+export * from './components/ps-skeleton-card';
+export * from './components/ps-skeleton-group';
+export * from './components/ps-skeleton-list';
+export * from './components/ps-skeleton-table';
+export * from './components/ps-skeleton-text';
 export * from './components/ps-spinner';
 export * from './components/ps-theme-toggle';
 export * from './components/ps-voice-orb';

package/dist/index.d.ts

@@ -18,6 +18,11 @@ export * from './components/ps-navigation-progress';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';
 export * from './components/ps-skeleton';
+export * from './components/ps-skeleton-card';
+export * from './components/ps-skeleton-group';
+export * from './components/ps-skeleton-list';
+export * from './components/ps-skeleton-table';
+export * from './components/ps-skeleton-text';
 export * from './components/ps-spinner';
 export * from './components/ps-theme-toggle';
 export * from './components/ps-voice-orb';

package/dist/index.js

@@ -34,6 +34,11 @@ __exportStar(require("./components/ps-navigation-progress"), exports);
 __exportStar(require("./components/ps-section-header"), exports);
 __exportStar(require("./components/ps-site-header"), exports);
 __exportStar(require("./components/ps-skeleton"), exports);
+__exportStar(require("./components/ps-skeleton-card"), exports);
+__exportStar(require("./components/ps-skeleton-group"), exports);
+__exportStar(require("./components/ps-skeleton-list"), exports);
+__exportStar(require("./components/ps-skeleton-table"), exports);
+__exportStar(require("./components/ps-skeleton-text"), exports);
 __exportStar(require("./components/ps-spinner"), exports);
 __exportStar(require("./components/ps-theme-toggle"), exports);
 __exportStar(require("./components/ps-voice-orb"), exports);

package/package.json

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