@pallasoft/ps-mobile-components 1.1.0 → 1.2.0

package/dist/components/ps-count-badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ps-count-badge';
+export * from './ps-count-badge-props';

package/dist/components/ps-count-badge/index.js

@@ -0,0 +1,2 @@
+export * from './ps-count-badge';
+export * from './ps-count-badge-props';

package/dist/components/ps-count-badge/ps-count-badge-props.d.ts

@@ -0,0 +1,5 @@
+export interface PsCountBadgeProps {
+    count: number;
+    isAlert?: boolean;
+    label?: string;
+}

package/dist/components/ps-count-badge/ps-count-badge-props.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ps-count-badge/ps-count-badge.d.ts

@@ -0,0 +1,2 @@
+import type { PsCountBadgeProps } from './ps-count-badge-props';
+export declare const PsCountBadge: ({ count, isAlert, label }: PsCountBadgeProps) => import("react").JSX.Element | null;

package/dist/components/ps-count-badge/ps-count-badge.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsCountBadgeConfig } from '../../constants/ps-count-badge-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsCountBadgeService } from '../../services/ps-count-badge-service';
+import { PsText } from '../ps-text/ps-text';
+export const PsCountBadge = ({ count, isAlert = false, label }) => {
+    const theme = usePsMobileTheme();
+    if (count <= 0)
+        return null;
+    return (_jsx(View, { accessibilityLabel: label, style: {
+            alignItems: 'center',
+            alignSelf: 'center',
+            backgroundColor: isAlert ? theme.danger : theme.primary,
+            borderRadius: PsCountBadgeConfig.height / 2,
+            height: PsCountBadgeConfig.height,
+            justifyContent: 'center',
+            minWidth: PsCountBadgeConfig.height,
+            paddingHorizontal: PsCountBadgeConfig.paddingHorizontal,
+        }, testID: 'ps-count-badge', children: _jsx(PsText, { style: {
+                color: isAlert ? theme.white : theme.primaryContrast,
+                fontSize: PsCountBadgeConfig.fontSize,
+                lineHeight: PsCountBadgeConfig.height,
+            }, weight: 'bold', children: PsCountBadgeService.text(count) }) }));
+};

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

@@ -8,3 +8,5 @@ export * from './ps-list-select-row';
 export * from './ps-list-select-row-props';
 export * from './ps-list-person-row';
 export * from './ps-list-person-row-props';
+export * from './ps-list-link-row';
+export * from './ps-list-link-row-props';

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

@@ -8,3 +8,5 @@ export * from './ps-list-select-row';
 export * from './ps-list-select-row-props';
 export * from './ps-list-person-row';
 export * from './ps-list-person-row-props';
+export * from './ps-list-link-row';
+export * from './ps-list-link-row-props';

package/dist/components/ps-list/ps-list-link-row-props.d.ts

@@ -0,0 +1,11 @@
+import type { PsMobileIconKey } from '../../constants/ps-mobile-icon-key';
+export interface PsListLinkRowProps {
+    count?: number;
+    countLabel?: string;
+    iconKey: PsMobileIconKey;
+    isAlert?: boolean;
+    isLoading?: boolean;
+    onPress: () => void;
+    subtitle?: string;
+    title: string;
+}

package/dist/components/ps-list/ps-list-link-row-props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export declare const PsListLinkRowSkeleton: () => import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsListConfig } from '../../constants/ps-list-config';
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+export const PsListLinkRowSkeleton = () => (_jsxs(View, { style: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        gap: PsLayoutConfig.headerSlotGap,
+        minHeight: PsLayoutConfig.linkRowMinHeight,
+        paddingHorizontal: PsLayoutConfig.gutter,
+        paddingVertical: PsLayoutConfig.rowPaddingVertical,
+    }, testID: 'ps-list-link-row-skeleton', children: [_jsx(PsSkeleton, { height: PsLayoutConfig.linkRowIconBox, radius: PsLayoutConfig.linkRowIconBoxRadius, width: PsLayoutConfig.linkRowIconBox }), _jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap * 3 }, children: [_jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsListConfig.skeletonTitleWidth }), _jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsListConfig.skeletonSubtitleWidth })] })] }));

package/dist/components/ps-list/ps-list-link-row.d.ts

@@ -0,0 +1,2 @@
+import type { PsListLinkRowProps } from './ps-list-link-row-props';
+export declare const PsListLinkRow: ({ count, countLabel, iconKey, isAlert, isLoading, onPress, subtitle, title, }: PsListLinkRowProps) => import("react").JSX.Element;

package/dist/components/ps-list/ps-list-link-row.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { Pressable, View } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMobileColorService } from '../../services/ps-mobile-color-service';
+import { PsCountBadge } from '../ps-count-badge/ps-count-badge';
+import { PsIcon } from '../ps-icon/ps-icon';
+import { PsText } from '../ps-text/ps-text';
+import { PsListLinkRowSkeleton } from './ps-list-link-row-skeleton';
+export const PsListLinkRow = ({ count, countLabel, iconKey, isAlert = false, isLoading = false, onPress, subtitle, title, }) => {
+    const theme = usePsMobileTheme();
+    const haptic = usePsHaptics();
+    if (isLoading)
+        return _jsx(PsListLinkRowSkeleton, {});
+    const hasCount = count !== undefined && count > 0;
+    return (_jsxs(Pressable, { accessibilityHint: countLabel, accessibilityRole: 'button', onPress: () => {
+            haptic('light');
+            onPress();
+        }, style: ({ pressed }) => ({
+            alignItems: 'center',
+            backgroundColor: pressed
+                ? PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.pressedAlpha)
+                : theme.surface,
+            flexDirection: 'row',
+            gap: PsLayoutConfig.headerSlotGap,
+            minHeight: PsLayoutConfig.linkRowMinHeight,
+            paddingHorizontal: PsLayoutConfig.gutter,
+            paddingVertical: PsLayoutConfig.rowPaddingVertical,
+        }), testID: 'ps-list-link-row', children: [_jsx(View, { style: {
+                    alignItems: 'center',
+                    backgroundColor: theme.primarySoft,
+                    borderRadius: PsLayoutConfig.linkRowIconBoxRadius,
+                    height: PsLayoutConfig.linkRowIconBox,
+                    justifyContent: 'center',
+                    width: PsLayoutConfig.linkRowIconBox,
+                }, children: _jsx(PsIcon, { color: theme.primary, iconKey: iconKey, size: PsLayoutConfig.linkRowIconSize }) }), _jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: title }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'small', children: subtitle }))] }), hasCount ? _jsx(PsCountBadge, { count: count, isAlert: isAlert, label: countLabel }) : null, _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.ChevronRight, size: PsMobileControlConfig.iconSizeInline })] }));
+};

package/dist/constants/ps-count-badge-config.d.ts

@@ -0,0 +1,6 @@
+export declare const PsCountBadgeConfig: {
+    readonly fontSize: 13;
+    readonly height: 24;
+    readonly maxCount: 99;
+    readonly paddingHorizontal: 7;
+};

package/dist/constants/ps-count-badge-config.js

@@ -0,0 +1,6 @@
+export const PsCountBadgeConfig = {
+    fontSize: 13,
+    height: 24,
+    maxCount: 99,
+    paddingHorizontal: 7,
+};

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

@@ -6,6 +6,10 @@ export declare const PsLayoutConfig: {
     readonly headerGap: 4;
     readonly headerSlotGap: 12;
     readonly hitSlop: 8;
+    readonly linkRowIconBox: 44;
+    readonly linkRowIconBoxRadius: 12;
+    readonly linkRowIconSize: 22;
+    readonly linkRowMinHeight: 72;
     readonly listGap: 24;
     readonly listSectionGap: 8;
     readonly longPressDelayMs: 350;

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

@@ -6,6 +6,10 @@ export const PsLayoutConfig = {
     headerGap: 4,
     headerSlotGap: 12,
     hitSlop: 8,
+    linkRowIconBox: 44,
+    linkRowIconBoxRadius: 12,
+    linkRowIconSize: 22,
+    linkRowMinHeight: 72,
     listGap: 24,
     listSectionGap: 8,
     longPressDelayMs: 350,

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export * from './components/ps-mobile-theme-provider';
 export * from './components/ps-page-backdrop';
 export * from './components/ps-pallasoft-sign-in-button';
 export * from './components/ps-color-swatches';
+export * from './components/ps-count-badge';
 export * from './components/ps-segmented-control';
 export * from './components/ps-tabs';
 export * from './components/ps-select';

package/dist/index.js

@@ -25,6 +25,7 @@ export * from './components/ps-mobile-theme-provider';
 export * from './components/ps-page-backdrop';
 export * from './components/ps-pallasoft-sign-in-button';
 export * from './components/ps-color-swatches';
+export * from './components/ps-count-badge';
 export * from './components/ps-segmented-control';
 export * from './components/ps-tabs';
 export * from './components/ps-select';

package/dist/services/ps-count-badge-service.d.ts

@@ -0,0 +1,3 @@
+export declare class PsCountBadgeService {
+    static text(count: number): string;
+}

package/dist/services/ps-count-badge-service.js

@@ -0,0 +1,6 @@
+import { PsCountBadgeConfig } from '../constants/ps-count-badge-config';
+export class PsCountBadgeService {
+    static text(count) {
+        return count > PsCountBadgeConfig.maxCount ? `${PsCountBadgeConfig.maxCount}+` : String(count);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-mobile-components",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"private": false,
 	"description": "Native iOS (SwiftUI) and Android (Jetpack Compose) Ps components for Pallasoft mobile apps",
 	"main": "./dist/index.js",