@pallasoft/ps-core-components 2.38.0 → 2.40.0

package/dist/components/ps-avatar-button.d.ts

@@ -0,0 +1,9 @@
+import type { MouseEventHandler } from 'react';
+import { type PsAvatarProps } from './ps-avatar';
+export interface PsAvatarButtonProps extends Omit<PsAvatarProps, 'alt' | 'className'> {
+    className?: string;
+    id?: string;
+    label: string;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}
+export declare const PsAvatarButton: ({ className, id, label, onClick, ...avatar }: PsAvatarButtonProps) => import("react").JSX.Element;

package/dist/components/ps-avatar-button.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsAvatarButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_avatar_1 = require("./ps-avatar");
+const PsAvatarButton = ({ className, id, label, onClick, ...avatar }) => ((0, jsx_runtime_1.jsx)("button", { "aria-label": label, className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring inline-flex shrink-0 rounded-full transition-shadow hover:ring-2 hover:ring-primary/35', className), id: id, onClick: onClick, title: label, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_avatar_1.PsAvatar, { ...avatar }) }));
+exports.PsAvatarButton = PsAvatarButton;

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

@@ -0,0 +1,9 @@
+import { PsAvatarSizeClassNames } from '../constants/ps-avatar-config';
+export interface PsAvatarProps {
+    alt?: string;
+    className?: string;
+    initials: string;
+    size?: keyof typeof PsAvatarSizeClassNames;
+    src?: string | null;
+}
+export declare const PsAvatar: ({ alt, className, initials, size, src }: PsAvatarProps) => import("react").JSX.Element;

package/dist/components/ps-avatar.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsAvatar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_avatar_config_1 = require("../constants/ps-avatar-config");
+const PsAvatar = ({ alt = '', className, initials, size = 'small', src }) => {
+    const [hasFailed, setHasFailed] = (0, react_1.useState)(false);
+    const sizeClassName = ps_avatar_config_1.PsAvatarSizeClassNames[size];
+    return src === null || src === undefined || src === '' || hasFailed ? ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": alt === '' ? 'true' : undefined, "aria-label": alt === '' ? undefined : alt, className: ps_design_system_1.PallasoftClassNameService.merge('flex shrink-0 items-center justify-center rounded-full bg-primary/15 font-bold text-primary', sizeClassName, className), children: initials })) : ((0, jsx_runtime_1.jsx)("img", { alt: alt, className: ps_design_system_1.PallasoftClassNameService.merge('shrink-0 rounded-full object-cover', sizeClassName, className), decoding: 'async', loading: 'lazy', onError: () => setHasFailed(true), src: src }));
+};
+exports.PsAvatar = PsAvatar;

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

@@ -1,4 +1,4 @@
-import type { ElementType, ReactNode } from 'react';
+import type { ElementType, KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
 export interface PsTextLinkProps {
     'aria-label'?: string;
     'children': ReactNode;
@@ -6,7 +6,8 @@ export interface PsTextLinkProps {
     'href'?: string;
     'id'?: string;
     'LinkComponent'?: ElementType;
-    'onClick'?: () => void;
+    'onClick'?: MouseEventHandler<HTMLElement>;
+    'onKeyDown'?: KeyboardEventHandler<HTMLElement>;
     'size'?: 'compact' | 'default';
 }
 export declare const PsTextLink: ({ children, className, href, LinkComponent, onClick, size, ...props }: PsTextLinkProps) => import("react").JSX.Element;

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

@@ -0,0 +1,5 @@
+export declare const PsAvatarSizeClassNames: {
+    large: string;
+    medium: string;
+    small: string;
+};

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsAvatarSizeClassNames = void 0;
+exports.PsAvatarSizeClassNames = {
+    large: 'h-20 w-20 text-xl',
+    medium: 'h-12 w-12 text-base',
+    small: 'h-8 w-8 text-xs',
+};

package/dist/esm/components/ps-avatar-button.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsAvatar } from './ps-avatar.js';
+export const PsAvatarButton = ({ className, id, label, onClick, ...avatar }) => (_jsx("button", { "aria-label": label, className: PallasoftClassNameService.merge('ps-focus-ring inline-flex shrink-0 rounded-full transition-shadow hover:ring-2 hover:ring-primary/35', className), id: id, onClick: onClick, title: label, type: 'button', children: _jsx(PsAvatar, { ...avatar }) }));

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsAvatarSizeClassNames } from '../constants/ps-avatar-config.js';
+export const PsAvatar = ({ alt = '', className, initials, size = 'small', src }) => {
+    const [hasFailed, setHasFailed] = useState(false);
+    const sizeClassName = PsAvatarSizeClassNames[size];
+    return src === null || src === undefined || src === '' || hasFailed ? (_jsx("span", { "aria-hidden": alt === '' ? 'true' : undefined, "aria-label": alt === '' ? undefined : alt, className: PallasoftClassNameService.merge('flex shrink-0 items-center justify-center rounded-full bg-primary/15 font-bold text-primary', sizeClassName, className), children: initials })) : (_jsx("img", { alt: alt, className: PallasoftClassNameService.merge('shrink-0 rounded-full object-cover', sizeClassName, className), decoding: 'async', loading: 'lazy', onError: () => setHasFailed(true), src: src }));
+};

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

@@ -0,0 +1,5 @@
+export const PsAvatarSizeClassNames = {
+    large: 'h-20 w-20 text-xl',
+    medium: 'h-12 w-12 text-base',
+    small: 'h-8 w-8 text-xs',
+};

package/dist/esm/index.js

@@ -1,6 +1,8 @@
 export * from './components/ps-layer.js';
 export * from './components/ps-accordion.js';
 export * from './components/ps-action-tile.js';
+export * from './components/ps-avatar.js';
+export * from './components/ps-avatar-button.js';
 export * from './components/ps-action-tile-link.js';
 export * from './components/ps-audio-spectrum.js';
 export * from './constants/ps-audio-spectrum-config.js';

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export * from './components/ps-layer';
 export * from './components/ps-accordion';
 export * from './components/ps-action-tile';
+export * from './components/ps-avatar';
+export * from './components/ps-avatar-button';
 export * from './components/ps-action-tile-link';
 export * from './components/ps-audio-spectrum';
 export * from './constants/ps-audio-spectrum-config';

package/dist/index.js

@@ -17,6 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/ps-layer"), exports);
 __exportStar(require("./components/ps-accordion"), exports);
 __exportStar(require("./components/ps-action-tile"), exports);
+__exportStar(require("./components/ps-avatar"), exports);
+__exportStar(require("./components/ps-avatar-button"), exports);
 __exportStar(require("./components/ps-action-tile-link"), exports);
 __exportStar(require("./components/ps-audio-spectrum"), exports);
 __exportStar(require("./constants/ps-audio-spectrum-config"), exports);

package/package.json

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