@pallasoft/ps-core-components 2.6.0 → 2.7.0
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.
- package/dist/components/ps-accordion.d.ts +2 -1
- package/dist/components/ps-accordion.js +3 -1
- package/dist/components/ps-section-header.d.ts +2 -1
- package/dist/components/ps-section-header.js +3 -1
- package/dist/esm/components/ps-accordion.js +3 -1
- package/dist/esm/components/ps-section-header.js +3 -1
- package/package.json +1 -1
|
@@ -2,9 +2,10 @@ import type { ReactNode } from 'react';
|
|
|
2
2
|
export interface PsAccordionProps {
|
|
3
3
|
children: ReactNode;
|
|
4
4
|
className?: string;
|
|
5
|
+
isLoading?: boolean;
|
|
5
6
|
isOpen: boolean;
|
|
6
7
|
label: ReactNode;
|
|
7
8
|
onToggle: () => void;
|
|
8
9
|
trailing?: ReactNode;
|
|
9
10
|
}
|
|
10
|
-
export declare const PsAccordion: ({ children, className, isOpen, label, onToggle, trailing, }: PsAccordionProps) => import("react").JSX.Element;
|
|
11
|
+
export declare const PsAccordion: ({ children, className, isLoading, isOpen, label, onToggle, trailing, }: PsAccordionProps) => import("react").JSX.Element;
|
|
@@ -38,5 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
38
38
|
const ps_design_system_1 = require("@pallasoft/ps-design-system");
|
|
39
39
|
const ps_icons_1 = require("@pallasoft/ps-icons");
|
|
40
40
|
const AccordionPrimitive = __importStar(require("@radix-ui/react-accordion"));
|
|
41
|
-
const
|
|
41
|
+
const ps_skeleton_1 = require("./ps-skeleton");
|
|
42
|
+
const ps_skeleton_group_1 = require("./ps-skeleton-group");
|
|
43
|
+
const PsAccordion = ({ children, className, isLoading = false, isOpen, label, onToggle, trailing, }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('rounded-ps-card border border-line/70 bg-surface/60 px-4 py-3.5', className), label: 'Loading', children: (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-4 w-40' }) })) : ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Root, { type: 'single', collapsible: true, value: isOpen ? 'open' : '', onValueChange: onToggle, className: ps_design_system_1.PallasoftClassNameService.merge('overflow-hidden rounded-ps-card border border-line/70 bg-surface/60 transition-colors duration-200', isOpen ? 'border-primary/25 bg-surface' : 'hover:border-line hover:bg-surface/90', className), children: (0, jsx_runtime_1.jsxs)(AccordionPrimitive.Item, { value: 'open', children: [(0, jsx_runtime_1.jsx)(AccordionPrimitive.Header, { children: (0, jsx_runtime_1.jsxs)(AccordionPrimitive.Trigger, { className: 'ps-focus-ring flex w-full items-center justify-between gap-3 px-4 py-3.5 text-left', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-body-2 font-semibold text-ink', children: label }), (0, jsx_runtime_1.jsxs)("span", { className: 'flex shrink-0 items-center gap-2', children: [trailing, (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { iconKey: ps_icons_1.PsIconKey.ChevronRight, className: ps_design_system_1.PallasoftClassNameService.merge('h-4 w-4 text-ink/40 transition-transform duration-200', isOpen ? 'rotate-90 text-primary' : '') })] })] }) }), (0, jsx_runtime_1.jsx)(AccordionPrimitive.Content, { className: 'ps-accordion-content', children: (0, jsx_runtime_1.jsx)("div", { className: 'border-t border-line/70 p-4', children: children }) })] }) }));
|
|
42
44
|
exports.PsAccordion = PsAccordion;
|
|
@@ -2,8 +2,9 @@ import type { ReactNode } from 'react';
|
|
|
2
2
|
export interface PsSectionHeaderProps {
|
|
3
3
|
description?: string;
|
|
4
4
|
eyebrow?: string;
|
|
5
|
+
isLoading?: boolean;
|
|
5
6
|
leading?: ReactNode;
|
|
6
7
|
title: string;
|
|
7
8
|
trailing?: ReactNode;
|
|
8
9
|
}
|
|
9
|
-
export declare const PsSectionHeader: ({ description, eyebrow, leading, title, trailing, }: PsSectionHeaderProps) => import("react").JSX.Element;
|
|
10
|
+
export declare const PsSectionHeader: ({ description, eyebrow, isLoading, leading, title, trailing, }: PsSectionHeaderProps) => import("react").JSX.Element;
|
|
@@ -2,5 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PsSectionHeader = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const
|
|
5
|
+
const ps_skeleton_1 = require("./ps-skeleton");
|
|
6
|
+
const ps_skeleton_group_1 = require("./ps-skeleton-group");
|
|
7
|
+
const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [eyebrow ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-24' }) : null, (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-6 w-52' }), description ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-10 w-32', shape: 'block' }) : null] })) : ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? ((0, jsx_runtime_1.jsx)("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
|
|
6
8
|
exports.PsSectionHeader = PsSectionHeader;
|
|
@@ -2,4 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
|
|
3
3
|
import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
|
|
4
4
|
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
5
|
-
|
|
5
|
+
import { PsSkeleton } from './ps-skeleton';
|
|
6
|
+
import { PsSkeletonGroup } from './ps-skeleton-group';
|
|
7
|
+
export const PsAccordion = ({ children, className, isLoading = false, isOpen, label, onToggle, trailing, }) => isLoading ? (_jsx(PsSkeletonGroup, { className: PallasoftClassNameService.merge('rounded-ps-card border border-line/70 bg-surface/60 px-4 py-3.5', className), label: 'Loading', children: _jsx(PsSkeleton, { className: 'h-4 w-40' }) })) : (_jsx(AccordionPrimitive.Root, { type: 'single', collapsible: true, value: isOpen ? 'open' : '', onValueChange: onToggle, className: PallasoftClassNameService.merge('overflow-hidden rounded-ps-card border border-line/70 bg-surface/60 transition-colors duration-200', isOpen ? 'border-primary/25 bg-surface' : 'hover:border-line hover:bg-surface/90', className), children: _jsxs(AccordionPrimitive.Item, { value: 'open', children: [_jsx(AccordionPrimitive.Header, { children: _jsxs(AccordionPrimitive.Trigger, { className: 'ps-focus-ring flex w-full items-center justify-between gap-3 px-4 py-3.5 text-left', children: [_jsx("span", { className: 'text-body-2 font-semibold text-ink', children: label }), _jsxs("span", { className: 'flex shrink-0 items-center gap-2', children: [trailing, _jsx(PsIcon, { iconKey: PsIconKey.ChevronRight, className: PallasoftClassNameService.merge('h-4 w-4 text-ink/40 transition-transform duration-200', isOpen ? 'rotate-90 text-primary' : '') })] })] }) }), _jsx(AccordionPrimitive.Content, { className: 'ps-accordion-content', children: _jsx("div", { className: 'border-t border-line/70 p-4', children: children }) })] }) }));
|
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
|
|
2
|
+
import { PsSkeleton } from './ps-skeleton';
|
|
3
|
+
import { PsSkeletonGroup } from './ps-skeleton-group';
|
|
4
|
+
export const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [eyebrow ? _jsx(PsSkeleton, { className: 'h-2.5 w-24' }) : null, _jsx(PsSkeleton, { className: 'h-6 w-52' }), description ? _jsx(PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? _jsx(PsSkeleton, { className: 'h-10 w-32', shape: 'block' }) : null] })) : (_jsxs("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? (_jsx("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, _jsx("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? (_jsx("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? (_jsx("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
|