@pallasoft/ps-core-components 1.2.0 → 1.4.0

package/dist/components/ps-accordion.js

@@ -37,5 +37,6 @@ exports.PsAccordion = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const AccordionPrimitive = __importStar(require("@radix-ui/react-accordion"));
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsAccordion = ({ children, className, isOpen, label, onToggle, trailing, }) => ((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-2xl border border-line/70 bg-mist/60', 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', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-body-2 font-semibold text-ink', children: label }), trailing] }) }), (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 }) })] }) }));
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const PsAccordion = ({ children, className, isOpen, label, onToggle, trailing, }) => ((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 }) })] }) }));
 exports.PsAccordion = PsAccordion;

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

@@ -0,0 +1,20 @@
+import type { CSSProperties, ElementType, ReactNode } from 'react';
+import { TypedObject } from '@portabletext/types';
+export interface PsPortableTextProps {
+    bodyClasses?: string;
+    containerClasses?: string;
+    containerStyles?: CSSProperties;
+    headerClasses?: string;
+    isLargeBodyFont?: boolean;
+    linkClassName?: string;
+    LinkComponent?: ElementType<{
+        'aria-label'?: string;
+        children?: ReactNode;
+        className?: string;
+        href: string;
+        rel?: string;
+    }>;
+    listClasses?: string;
+    text: TypedObject[];
+}
+export declare const PsPortableText: ({ bodyClasses, containerClasses, containerStyles, headerClasses, isLargeBodyFont, linkClassName, LinkComponent, listClasses, text, }: PsPortableTextProps) => import("react").JSX.Element;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableText = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@portabletext/react");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsPortableText = ({ bodyClasses = 'text-ink', containerClasses = '', containerStyles = {}, headerClasses = 'text-ink', isLargeBodyFont = false, linkClassName = 'text-primary underline', LinkComponent = 'a', listClasses = 'text-ink', text, }) => {
+    const hasContainerStyles = Object.keys(containerStyles).length > 0;
+    const getBodyClass = hasContainerStyles ? '' : bodyClasses;
+    const getHeaderClass = hasContainerStyles ? '' : headerClasses;
+    const getListClass = hasContainerStyles ? '' : listClasses;
+    const components = {
+        marks: {
+            link: ({ children, value }) => {
+                const rel = !value.href.startsWith('/') ? 'noreferrer noopener' : undefined;
+                return ((0, jsx_runtime_1.jsx)(LinkComponent, { href: value.href, rel: rel, className: linkClassName, "aria-label": value.children, children: children }));
+            },
+        },
+        list: {
+            bullet: ({ children }) => (0, jsx_runtime_1.jsx)("ul", { className: 'mb-3 mt-1 list-disc ml-4', children: children }),
+            number: ({ children }) => (0, jsx_runtime_1.jsx)("ol", { className: 'mb-3 mt-1 list-decimal ml-4', children: children }),
+        },
+        listItem: {
+            bullet: ({ children }) => ((0, jsx_runtime_1.jsx)("li", { className: ps_design_system_1.PallasoftClassNameService.merge('md:text-body-2 max-md:text-body-3', getListClass), children: children })),
+            number: ({ children }) => ((0, jsx_runtime_1.jsx)("li", { className: ps_design_system_1.PallasoftClassNameService.merge('md:text-body-2 max-md:text-body-3', getListClass), children: children })),
+        },
+        block: {
+            normal: ({ children }) => ((0, jsx_runtime_1.jsx)("p", { className: ps_design_system_1.PallasoftClassNameService.merge(isLargeBodyFont ? 'text-body-1' : 'text-body-2', 'whitespace-pre-line', getBodyClass), children: children })),
+            h2: ({ children }) => ((0, jsx_runtime_1.jsx)("h2", { className: ps_design_system_1.PallasoftClassNameService.merge('text-header-1 py-2', getHeaderClass), children: children })),
+            h3: ({ children }) => ((0, jsx_runtime_1.jsx)("h3", { className: ps_design_system_1.PallasoftClassNameService.merge('text-header-2 py-2', getHeaderClass), children: children })),
+            h4: ({ children }) => ((0, jsx_runtime_1.jsx)("h4", { className: ps_design_system_1.PallasoftClassNameService.merge('text-header-3 py-2', getHeaderClass), children: children })),
+            h5: ({ children }) => ((0, jsx_runtime_1.jsx)("h5", { className: ps_design_system_1.PallasoftClassNameService.merge('text-header-3 py-1', getHeaderClass), children: children })),
+            h6: ({ children }) => ((0, jsx_runtime_1.jsx)("h6", { className: ps_design_system_1.PallasoftClassNameService.merge('text-header-4 py-1', getHeaderClass), children: children })),
+        },
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: containerClasses, style: containerStyles, children: (0, jsx_runtime_1.jsx)(react_1.PortableText, { value: text, components: components }) }));
+};
+exports.PsPortableText = PsPortableText;

package/dist/components/ps-site-header.d.ts

@@ -7,8 +7,9 @@ export interface PsSiteHeaderProps {
     logoAlt?: string;
     logoClassName?: string;
     logoSrc: string;
+    logoSrcMobile?: string;
     onBack?: () => void;
     showLabel?: boolean;
     trailing?: ReactNode;
 }
-export declare const PsSiteHeader: ({ centerContent, homeHref, label, LinkComponent, logoAlt, logoClassName, logoSrc, onBack, showLabel, trailing, }: PsSiteHeaderProps) => import("react").JSX.Element;
+export declare const PsSiteHeader: ({ centerContent, homeHref, label, LinkComponent, logoAlt, logoClassName, logoSrc, logoSrcMobile, onBack, showLabel, trailing, }: PsSiteHeaderProps) => import("react").JSX.Element;

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

@@ -5,9 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const logoLinkClassName = 'flex shrink-0 items-center gap-2.5';
-const PsSiteHeader = ({ centerContent, homeHref, label, LinkComponent, logoAlt, logoClassName, logoSrc, onBack, showLabel = false, trailing, }) => {
+const PsSiteHeader = ({ centerContent, homeHref, label, LinkComponent, logoAlt, logoClassName, logoSrc, logoSrcMobile, onBack, showLabel = false, trailing, }) => {
     const logoLabel = `${label} home`;
-    const logoContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { alt: logoAlt ?? label, className: ps_design_system_1.PallasoftClassNameService.merge('h-8 w-auto', logoClassName), src: logoSrc }), showLabel ? (0, jsx_runtime_1.jsx)("span", { className: 'text-base font-bold text-ink', children: label }) : null] }));
+    const logoContent = logoSrcMobile ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { alt: logoAlt ?? label, className: ps_design_system_1.PallasoftClassNameService.merge('hidden h-8 w-auto sm:block', logoClassName), src: logoSrc }), (0, jsx_runtime_1.jsx)("img", { alt: logoAlt ?? label, className: ps_design_system_1.PallasoftClassNameService.merge('h-8 w-auto sm:hidden', logoClassName), src: logoSrcMobile }), 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: [(0, jsx_runtime_1.jsx)("img", { alt: logoAlt ?? label, className: ps_design_system_1.PallasoftClassNameService.merge('h-8 w-auto', logoClassName), src: logoSrc }), 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, 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", { className: 'fixed inset-x-0 top-0 z-header px-6 pt-4', children: (0, jsx_runtime_1.jsxs)("nav", { className: 'ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', 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/hooks/use-ps-audio-spectrum.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePsAudioSpectrum = void 0;
 const react_1 = require("react");
-const DefaultBarCount = 12;
-const DefaultFftSize = 128;
-const DefaultSmoothing = 0.75;
 const usePsAudioSpectrum = (audioElement, options = {}) => {
+    const DefaultBarCount = 12;
+    const DefaultFftSize = 128;
+    const DefaultSmoothing = 0.75;
     const barCount = typeof options.barCount === 'number' ? options.barCount : DefaultBarCount;
     const fftSize = typeof options.fftSize === 'number' ? options.fftSize : DefaultFftSize;
     const smoothing = typeof options.smoothing === 'number' ? options.smoothing : DefaultSmoothing;
@@ -50,12 +50,15 @@ const usePsAudioSpectrum = (audioElement, options = {}) => {
             if (audioContext.state === 'suspended')
                 audioContext.resume().catch(() => undefined);
         };
+        const gestureEvents = ['touchend', 'mousedown', 'keydown'];
         resumeAudioContext();
         audioElement.addEventListener('play', resumeAudioContext);
+        gestureEvents.forEach((eventName) => document.addEventListener(eventName, resumeAudioContext, { once: true }));
         animationFrame = requestAnimationFrame(tick);
         return () => {
             cancelAnimationFrame(animationFrame);
             audioElement.removeEventListener('play', resumeAudioContext);
+            gestureEvents.forEach((eventName) => document.removeEventListener(eventName, resumeAudioContext));
             source.disconnect();
             analyser.disconnect();
             audioContext.close().catch(() => undefined);

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export * from './components/ps-infinite-scroll';
 export * from './components/ps-list-tile';
 export * from './components/ps-metric-card';
 export * from './components/ps-pill';
+export * from './components/ps-portable-text';
 export * from './components/ps-reflective-app-shell';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';

package/dist/index.js

@@ -27,6 +27,7 @@ __exportStar(require("./components/ps-infinite-scroll"), exports);
 __exportStar(require("./components/ps-list-tile"), exports);
 __exportStar(require("./components/ps-metric-card"), exports);
 __exportStar(require("./components/ps-pill"), exports);
+__exportStar(require("./components/ps-portable-text"), exports);
 __exportStar(require("./components/ps-reflective-app-shell"), exports);
 __exportStar(require("./components/ps-section-header"), exports);
 __exportStar(require("./components/ps-site-header"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-core-components",
-	"version": "1.2.0",
+	"version": "1.4.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -28,8 +28,10 @@
 		"release": "semantic-release"
 	},
 	"dependencies": {
-		"@pallasoft/ps-design-system": "^1.0.0",
-		"@pallasoft/ps-icons": "^1.0.0",
+		"@pallasoft/ps-design-system": "^1.1.0",
+		"@pallasoft/ps-icons": "^1.1.0",
+		"@portabletext/react": "^3.2.4",
+		"@portabletext/types": "^2.0.13",
 		"@radix-ui/react-accordion": "^1.2.12",
 		"react-infinite-scroll-component": "^6.1.1"
 	},