@pallasoft/ps-mobile-components 1.13.0 → 1.14.0

package/dist/components/ps-action-menu/ps-action-menu.android.js

@@ -19,9 +19,9 @@ export const PsActionMenu = ({ children, header, isDisabled = false, items, labe
                         if (!isDisabled)
                             menu.open();
                     },
-                }, children: children }), menu.anchor === undefined ? null : (_jsxs(PsMenuPopup, { anchor: menu.anchor, onClose: menu.close, children: [header === undefined ? null : (_jsx(PsMenuPopupHeader, { subtitle: header.subtitle, title: header.title })), groups.map((group, index) => (_jsxs(Fragment, { children: [index > 0 || header !== undefined ? _jsx(PsMenuPopupDivider, {}) : null, PsActionMenuService.flatten([group]).map((item) => (_jsx(PsMenuPopupRow, { iconKey: item.iconKey, isChecked: item.isChecked, isDanger: item.isDanger, isDisabled: item.isDisabled, isWarning: item.isWarning, label: item.label, onPress: () => {
+                }, children: children }), menu.anchor === undefined ? null : (_jsxs(PsMenuPopup, { anchor: menu.anchor, onClose: menu.close, children: [header === undefined ? null : (_jsx(PsMenuPopupHeader, { subtitle: header.subtitle, title: header.title })), groups.map((group, index) => (_jsxs(Fragment, { children: [index > 0 || header !== undefined ? _jsx(PsMenuPopupDivider, {}) : null, PsActionMenuService.flatten([group]).map((item) => (_jsx(PsMenuPopupRow, { iconKey: item.iconKey, imageUri: item.imageUri, isChecked: item.isChecked, isDanger: item.isDanger, isDisabled: item.isDisabled, isWarning: item.isWarning, label: item.label, monogram: item.monogram, onPress: () => {
                                     menu.close();
                                     haptic('selection');
                                     item.onSelect();
-                                }, subtitle: item.subtitle }, item.id)))] }, group.id)))] }))] }));
+                                }, subtitle: item.subtitle, tileColor: item.tileColor }, item.id)))] }, group.id)))] }))] }));
 };

package/dist/components/ps-action-menu/ps-menu-tile-drawing.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from 'react';
+import { PallasoftColorContrastService } from '@pallasoft/ps-design-system';
 import Svg, { ClipPath, Defs, G, Rect, Image as SvgImage, Text as SvgText } from 'react-native-svg';
 import { PsMenuTileConfig } from '../../constants/ps-menu-tile-config';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
@@ -14,6 +15,10 @@ export const PsMenuTileDrawing = ({ onTile, request }) => {
     const isMounted = useRef(true);
     const [isLaidOut, setIsLaidOut] = useState(false);
     const [isImageLoaded, setIsImageLoaded] = useState(false);
+    const fill = request.tileColor === undefined ? theme.primary : request.tileColor;
+    const textColor = request.tileColor === undefined
+        ? theme.primaryContrast
+        : PallasoftColorContrastService.textOn(request.tileColor);
     const isReady = isLaidOut && (request.imageUri === undefined || isImageLoaded);
     useEffect(() => {
         isMounted.current = true;
@@ -29,6 +34,6 @@ export const PsMenuTileDrawing = ({ onTile, request }) => {
             if (isMounted.current)
                 onTile(request.key, `${PsMenuTileConfig.dataUriPrefix}${base64}`);
         });
-    }, [isReady, onTile, request.key, theme.primary, theme.primaryContrast]);
-    return (_jsxs(Svg, { height: size, onLayout: () => setIsLaidOut(true), ref: ref, width: size, children: [_jsx(Defs, { children: _jsx(ClipPath, { id: clipId, children: _jsx(Rect, { height: size, rx: isCircle ? size / 2 : PsMenuTileConfig.roundedRadius, width: size }) }) }), _jsxs(G, { clipPath: `url(#${clipId})`, children: [_jsx(Rect, { fill: request.imageUri === undefined ? theme.primary : theme.white, height: size, width: size }), request.imageUri === undefined ? (_jsx(SvgText, { fill: theme.primaryContrast, fontFamily: theme.fonts.semibold, fontSize: fontSize, textAnchor: 'middle', x: size / 2, y: size / 2 + fontSize * PsMenuTileConfig.textBaseline, children: request.text })) : (_jsx(SvgImage, { height: size - inset * 2, href: { uri: request.imageUri }, onLoad: () => setIsImageLoaded(true), preserveAspectRatio: isCircle ? 'xMidYMid slice' : 'xMidYMid meet', width: size - inset * 2, x: inset, y: inset }))] })] }));
+    }, [isReady, onTile, request.key, fill, textColor]);
+    return (_jsxs(Svg, { height: size, onLayout: () => setIsLaidOut(true), ref: ref, width: size, children: [_jsx(Defs, { children: _jsx(ClipPath, { id: clipId, children: _jsx(Rect, { height: size, rx: isCircle ? size / 2 : PsMenuTileConfig.roundedRadius, width: size }) }) }), _jsxs(G, { clipPath: `url(#${clipId})`, children: [_jsx(Rect, { fill: request.imageUri === undefined ? fill : theme.white, height: size, width: size }), request.imageUri === undefined ? (_jsx(SvgText, { fill: textColor, fontFamily: theme.fonts.semibold, fontSize: fontSize, textAnchor: 'middle', x: size / 2, y: size / 2 + fontSize * PsMenuTileConfig.textBaseline, children: request.text })) : (_jsx(SvgImage, { height: size - inset * 2, href: { uri: request.imageUri }, onLoad: () => setIsImageLoaded(true), preserveAspectRatio: isCircle ? 'xMidYMid slice' : 'xMidYMid meet', width: size - inset * 2, x: inset, y: inset }))] })] }));
 };

package/dist/components/ps-chart-bar/ps-chart-bar.js

@@ -1,12 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Animated, { useAnimatedProps } from 'react-native-reanimated';
-import { Rect } from 'react-native-svg';
-import { PsChartConfig } from '../../constants/ps-chart-config';
+import { G, Rect } from 'react-native-svg';
+import { PsChartBarCorner } from '../../constants/ps-chart-bar-corner';
+import { PsChartBarService } from '../../services/ps-chart-bar-service';
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
 export const PsChartBar = ({ progress, rect }) => {
+    const radius = PsChartBarService.radius(rect);
+    const hasFlatBase = rect.corner === PsChartBarCorner.Value && radius > 0;
     const animatedProps = useAnimatedProps(() => ({
         height: rect.height * progress.value,
         y: rect.isNegative ? rect.y : rect.y + rect.height * (1 - progress.value),
     }));
-    return (_jsx(AnimatedRect, { animatedProps: animatedProps, fill: rect.color, height: rect.height, rx: Math.min(PsChartConfig.barRadius, rect.width / 2), width: rect.width, x: rect.x, y: rect.y }));
+    const baseProps = useAnimatedProps(() => {
+        const height = Math.min(radius, rect.height * progress.value);
+        return { height, y: rect.isNegative ? rect.y : rect.y + rect.height - height };
+    });
+    return (_jsxs(G, { children: [_jsx(AnimatedRect, { animatedProps: animatedProps, fill: rect.color, height: rect.height, rx: radius, width: rect.width, x: rect.x, y: rect.y }), hasFlatBase ? (_jsx(AnimatedRect, { animatedProps: baseProps, fill: rect.color, height: Math.min(radius, rect.height), width: rect.width, x: rect.x, y: rect.isNegative ? rect.y : rect.y + rect.height - Math.min(radius, rect.height) })) : null] }));
 };

package/dist/components/ps-donut-chart/ps-donut-chart.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { View } from 'react-native';
-import Svg from 'react-native-svg';
+import Svg, { G } from 'react-native-svg';
 import { PsChartConfig } from '../../constants/ps-chart-config';
 import { PsChartSkeletonVariant } from '../../constants/ps-chart-skeleton-variant';
 import { usePsChartReveal } from '../../hooks/use-ps-chart-reveal';
@@ -12,6 +12,7 @@ import { PsChartDonutService } from '../../services/ps-chart-donut-service';
 import { PsChartEmptyState } from '../ps-chart-empty-state/ps-chart-empty-state';
 import { PsChartLegend } from '../ps-chart-legend/ps-chart-legend';
 import { PsChartSkeleton } from '../ps-chart-skeleton/ps-chart-skeleton';
+import { PsDonutReveal } from '../ps-donut-reveal/ps-donut-reveal';
 import { PsDonutSlice } from '../ps-donut-slice/ps-donut-slice';
 import { PsText } from '../ps-text/ps-text';
 export const PsDonutChart = ({ centerLabel, centerValue, data, emptyLabel, formatShare, height = PsChartConfig.donutHeight, isLoading = false, revealKey, }) => {
@@ -19,6 +20,7 @@ export const PsDonutChart = ({ centerLabel, centerValue, data, emptyLabel, forma
     const { onLayout, width } = usePsChartWidth();
     const fill = usePsWidgetFill();
     const [selected, setSelected] = useState(null);
+    const maskId = `donut${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
     const progress = usePsChartReveal(!isLoading && width > 0, revealKey);
     if (isLoading)
         return _jsx(PsChartSkeleton, { height: height, variant: PsChartSkeletonVariant.Donut });
@@ -27,7 +29,6 @@ export const PsDonutChart = ({ centerLabel, centerValue, data, emptyLabel, forma
     const slices = PsChartDonutService.slices(data, theme.chart, size);
     if (slices.length === 0)
         return _jsx(PsChartEmptyState, { height: height, label: emptyLabel });
-    const circumference = PsChartDonutService.circumference(size);
     const chosen = selected === null ? null : data[selected];
     const readValue = chosen === null
         ? centerValue
@@ -47,7 +48,7 @@ export const PsDonutChart = ({ centerLabel, centerValue, data, emptyLabel, forma
             justifyContent: 'center',
             minHeight: height + fill,
             rowGap: PsChartConfig.donutGap,
-        }, testID: 'ps-donut-chart', children: [_jsxs(View, { style: { height: size, width: size }, children: [_jsx(Svg, { height: size, width: size, children: slices.map((slice, index) => (_jsx(PsDonutSlice, { circumference: circumference, isDimmed: selected !== null && selected !== index, onPress: () => setSelected(selected === index ? null : index), progress: progress, size: size, slice: slice }, slice.id))) }), _jsxs(View, { pointerEvents: 'none', style: {
+        }, testID: 'ps-donut-chart', children: [_jsxs(View, { style: { height: size, width: size }, children: [_jsxs(Svg, { height: size, width: size, children: [_jsx(PsDonutReveal, { id: maskId, progress: progress, size: size }), _jsx(G, { mask: `url(#${maskId})`, children: slices.map((slice, index) => slice.path === '' ? null : (_jsx(PsDonutSlice, { isDimmed: selected !== null && selected !== index, onPress: () => setSelected(selected === index ? null : index), slice: slice }, slice.id))) })] }), _jsxs(View, { pointerEvents: 'none', style: {
                             alignItems: 'center',
                             bottom: 0,
                             justifyContent: 'center',

package/dist/components/ps-donut-reveal/index.d.ts

@@ -0,0 +1 @@
+export * from './ps-donut-reveal';

package/dist/components/ps-donut-reveal/index.js

@@ -0,0 +1 @@
+export * from './ps-donut-reveal';

package/dist/components/ps-donut-reveal/ps-donut-reveal-props.d.ts

@@ -0,0 +1,6 @@
+import type { SharedValue } from 'react-native-reanimated';
+export interface PsDonutRevealProps {
+    id: string;
+    progress: SharedValue<number>;
+    size: number;
+}

package/dist/components/ps-donut-reveal/ps-donut-reveal-props.js

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

package/dist/components/ps-donut-reveal/ps-donut-reveal.d.ts

@@ -0,0 +1,2 @@
+import type { PsDonutRevealProps } from './ps-donut-reveal-props';
+export declare const PsDonutReveal: ({ id, progress, size }: PsDonutRevealProps) => import("react").JSX.Element;

package/dist/components/ps-donut-reveal/ps-donut-reveal.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import { Circle, Defs, Mask } from 'react-native-svg';
+import { PsChartConfig } from '../../constants/ps-chart-config';
+import { PsChartDonutService } from '../../services/ps-chart-donut-service';
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+export const PsDonutReveal = ({ id, progress, size }) => {
+    const centre = size / 2;
+    const circumference = PsChartDonutService.circumference(size);
+    const animatedProps = useAnimatedProps(() => ({
+        strokeDasharray: [progress.value * circumference, circumference],
+    }));
+    return (_jsx(Defs, { children: _jsx(Mask, { height: size, id: id, maskUnits: 'userSpaceOnUse', width: size, x: 0, y: 0, children: _jsx(AnimatedCircle, { animatedProps: animatedProps, cx: centre, cy: centre, fill: 'none', origin: `${centre}, ${centre}`, r: PsChartDonutService.radius(size), rotation: -90, stroke: 'white', strokeDasharray: [0, circumference], strokeWidth: PsChartConfig.donutThickness + PsChartConfig.donutRevealOverlap }) }) }));
+};

package/dist/components/ps-donut-slice/ps-donut-slice-props.d.ts

@@ -1,10 +1,6 @@
-import type { SharedValue } from 'react-native-reanimated';
 import type { PsDonutSliceData } from '../../interfaces/ps-donut-slice-data';
 export interface PsDonutSliceProps {
-    circumference: number;
     isDimmed: boolean;
     onPress: () => void;
-    progress: SharedValue<number>;
-    size: number;
     slice: PsDonutSliceData;
 }

package/dist/components/ps-donut-slice/ps-donut-slice.d.ts

@@ -1,2 +1,2 @@
 import type { PsDonutSliceProps } from './ps-donut-slice-props';
-export declare const PsDonutSlice: ({ circumference, isDimmed, onPress, progress, size, slice, }: PsDonutSliceProps) => import("react").JSX.Element;
+export declare const PsDonutSlice: ({ isDimmed, onPress, slice }: PsDonutSliceProps) => import("react").JSX.Element;

package/dist/components/ps-donut-slice/ps-donut-slice.js

@@ -1,16 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Animated, { useAnimatedProps } from 'react-native-reanimated';
-import { Circle } from 'react-native-svg';
+import { Path } from 'react-native-svg';
 import { PsChartConfig } from '../../constants/ps-chart-config';
-import { PsChartDonutService } from '../../services/ps-chart-donut-service';
-const AnimatedCircle = Animated.createAnimatedComponent(Circle);
-export const PsDonutSlice = ({ circumference, isDimmed, onPress, progress, size, slice, }) => {
-    const centre = size / 2;
-    const animatedProps = useAnimatedProps(() => ({
-        strokeDasharray: [
-            Math.max(0, Math.min(slice.dashLength, progress.value * circumference - slice.start)),
-            circumference,
-        ],
-    }));
-    return (_jsx(AnimatedCircle, { animatedProps: animatedProps, cx: centre, cy: centre, fill: 'none', onPress: onPress, opacity: isDimmed ? 0.4 : 1, origin: `${centre}, ${centre}`, r: PsChartDonutService.radius(size), rotation: -90, stroke: slice.color, strokeDasharray: [slice.dashLength, circumference], strokeDashoffset: slice.dashOffset, strokeWidth: PsChartConfig.donutThickness }));
-};
+export const PsDonutSlice = ({ isDimmed, onPress, slice }) => (_jsx(Path, { d: slice.path, fill: slice.color, fillRule: 'evenodd', onPress: onPress, opacity: isDimmed ? PsChartConfig.donutDimmedOpacity : 1 }));

package/dist/components/ps-menu-popup/ps-menu-popup-row.d.ts

@@ -1,12 +1,15 @@
 import type { PsMobileIconKey } from '../../constants/ps-mobile-icon-key';
 export interface PsMenuPopupRowProps {
     iconKey?: PsMobileIconKey;
+    imageUri?: string;
     isChecked?: boolean;
     isDanger?: boolean;
     isDisabled?: boolean;
     isWarning?: boolean;
     label: string;
+    monogram?: string;
     onPress: () => void;
     subtitle?: string;
+    tileColor?: string;
 }
-export declare const PsMenuPopupRow: ({ iconKey, isChecked, isDanger, isDisabled, isWarning, label, onPress, subtitle, }: PsMenuPopupRowProps) => import("react").JSX.Element;
+export declare const PsMenuPopupRow: ({ iconKey, imageUri, isChecked, isDanger, isDisabled, isWarning, label, monogram, onPress, subtitle, tileColor, }: PsMenuPopupRowProps) => import("react").JSX.Element;

package/dist/components/ps-menu-popup/ps-menu-popup-row.js

@@ -11,7 +11,8 @@ import { PsRippleService } from '../../services/ps-ripple-service';
 import { PsStateService } from '../../services/ps-state-service';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsText } from '../ps-text/ps-text';
-export const PsMenuPopupRow = ({ iconKey, isChecked = false, isDanger = false, isDisabled = false, isWarning = false, label, onPress, subtitle, }) => {
+import { PsMenuPopupTile } from './ps-menu-popup-tile';
+export const PsMenuPopupRow = ({ iconKey, imageUri, isChecked = false, isDanger = false, isDisabled = false, isWarning = false, label, monogram, onPress, subtitle, tileColor, }) => {
     const theme = usePsMobileTheme();
     const scheme = usePsMaterialScheme();
     const isMaterial = PsMenuPopupStyleService.isMaterial();
@@ -30,5 +31,5 @@ export const PsMenuPopupRow = ({ iconKey, isChecked = false, isDanger = false, i
                 overflow: 'hidden',
                 paddingHorizontal: row.paddingHorizontal,
             };
-        }, children: [iconKey === undefined ? null : _jsx(PsIcon, { color: tint, iconKey: iconKey }), _jsxs(View, { style: { flex: 1 }, children: [_jsx(PsText, { numberOfLines: 1, tone: isDanger ? 'danger' : 'ink', weight: PsMenuPopupStyleService.labelWeight(isMaterial, isChecked), children: label }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: isWarning ? 'warning' : 'muted', variant: 'small', children: subtitle }))] }), isChecked ? _jsx(PsIcon, { color: theme.primaryText, iconKey: PsIconKey.Check }) : null] }));
+        }, children: [imageUri !== undefined || monogram !== undefined ? (_jsx(PsMenuPopupTile, { imageUri: imageUri, monogram: monogram, tileColor: tileColor })) : iconKey === undefined ? null : (_jsx(PsIcon, { color: tint, iconKey: iconKey })), _jsxs(View, { style: { flex: 1 }, children: [_jsx(PsText, { numberOfLines: 1, tone: isDanger ? 'danger' : 'ink', weight: PsMenuPopupStyleService.labelWeight(isMaterial, isChecked), children: label }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: isWarning ? 'warning' : 'muted', variant: 'small', children: subtitle }))] }), isChecked ? _jsx(PsIcon, { color: theme.primaryText, iconKey: PsIconKey.Check }) : null] }));
 };

package/dist/components/ps-menu-popup/ps-menu-popup-tile.d.ts

@@ -0,0 +1,6 @@
+export interface PsMenuPopupTileProps {
+    imageUri?: string;
+    monogram?: string;
+    tileColor?: string;
+}
+export declare const PsMenuPopupTile: ({ imageUri, monogram, tileColor }: PsMenuPopupTileProps) => import("react").JSX.Element;

package/dist/components/ps-menu-popup/ps-menu-popup-tile.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftColorContrastService } from '@pallasoft/ps-design-system';
+import { Image, View } from 'react-native';
+import { PsMenuPopupConfig } from '../../constants/ps-menu-popup-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMenuTileService } from '../../services/ps-menu-tile-service';
+import { PsText } from '../ps-text/ps-text';
+export const PsMenuPopupTile = ({ imageUri, monogram, tileColor }) => {
+    const theme = usePsMobileTheme();
+    const size = PsMenuPopupConfig.tileSize;
+    const fill = tileColor === undefined ? theme.primary : tileColor;
+    const textColor = tileColor === undefined
+        ? theme.primaryContrast
+        : PallasoftColorContrastService.textOn(tileColor);
+    return (_jsx(View, { style: {
+            alignItems: 'center',
+            backgroundColor: imageUri === undefined ? fill : theme.white,
+            borderRadius: PsMenuPopupConfig.tileRadius,
+            height: size,
+            justifyContent: 'center',
+            overflow: 'hidden',
+            width: size,
+        }, testID: 'ps-menu-popup-tile', children: imageUri === undefined ? (_jsx(PsText, { style: { color: textColor, fontSize: PsMenuPopupConfig.tileFontSize }, weight: 'semibold', children: PsMenuTileService.letter(monogram === undefined ? '' : monogram) })) : (_jsx(Image, { resizeMode: 'contain', source: { uri: imageUri }, style: {
+                height: size - PsMenuPopupConfig.tileLogoPadding * 2,
+                width: size - PsMenuPopupConfig.tileLogoPadding * 2,
+            } })) }));
+};

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsIconKey } from '@pallasoft/ps-icons';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { PsPageHeaderConfig } from '../../constants/ps-page-header-config';
 import { PsSheetConfig } from '../../constants/ps-sheet-config';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
@@ -20,7 +20,7 @@ export const PsSheetHeader = ({ eyebrow, isLeadingDisabled = false, leadingKind
             minHeight: PsSheetConfig.headerMinHeight,
             paddingBottom: PsSheetConfig.headerPaddingBottom,
             paddingHorizontal: PsSheetConfig.headerPaddingHorizontal,
-            paddingTop: PsSheetConfig.headerPaddingTop,
+            paddingTop: PsSheetService.headerPaddingTop(Platform.OS),
         }, testID: 'ps-sheet-header', children: [_jsx(View, { style: { alignItems: 'flex-start', minWidth: PsSheetConfig.actionMinWidth }, children: leadingLabel === undefined ? null : (_jsx(View, { style: PsSheetService.leadingIconStyle(leadingKind), children: _jsx(PsIconButton, { iconKey: leadingKind === 'back' ? PsIconKey.ChevronRight : PsIconKey.Close, isDisabled: isLeadingDisabled, label: leadingLabel, onPress: onLeadingPress, testID: 'ps-sheet-leading', variant: 'header' }) })) }), _jsxs(View, { style: { alignItems: 'center', flex: 1 }, children: [_jsx(PsText, { accessibilityRole: 'header', align: 'center', numberOfLines: 2, weight: 'bold', children: title }), eyebrow === undefined ? null : (_jsx(PsText, { align: 'center', numberOfLines: 1, tone: 'muted', variant: 'small', children: eyebrow }))] }), _jsx(View, { style: { alignItems: 'flex-end', minWidth: PsSheetConfig.actionMinWidth }, children: trailing === undefined ? null : trailing.isSubmitting === true ? (_jsx(View, { accessibilityLabel: trailing.label, accessibilityState: { busy: true }, style: {
                         alignItems: 'center',
                         backgroundColor: trailingColor,

package/dist/components/ps-sortable-grid/ps-sortable-grid.js

@@ -135,12 +135,12 @@ export const PsSortableGrid = ({ getItemSpan, isDisabled = false, items, labels,
         notify(next);
         PsHapticService.play('selection', hasHaptics);
     }, [hasHaptics]);
-    const measure = useCallback((id, total, renderedExtra) => {
-        const natural = PsSortableGridService.natural(total, renderedExtra);
+    const measure = useCallback((id, total, fill) => {
+        const natural = PsSortableGridService.natural(total, fill);
         setMeasured((current) => current[id] !== undefined &&
             Math.abs(current[id] - natural) < PsSortableGridConfig.measureTolerance
             ? current
             : { ...current, [id]: natural });
     }, []);
-    return (_jsx(View, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: { height: PsSortableGridService.contentHeight(rects) }, children: order.map((item, index) => (_jsx(PsSortableItem, { canMoveDown: index < order.length - 1, canMoveUp: index > 0, dragX: dragX, dragY: dragY, extra: extras[index], id: item.id, isActive: item.id === activeId, isDisabled: isDisabled, isReady: isReady, label: item.label, labels: labels, onEnd: end, onMeasure: measure, onMove: moveBy, onStart: start, onUpdate: update, rect: rects[index], children: renderItem({ isActive: item.id === activeId, item }) }, item.id))) }));
+    return (_jsx(View, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: { height: PsSortableGridService.contentHeight(rects) }, testID: PsSortableGridConfig.testId, children: order.map((item, index) => (_jsx(PsSortableItem, { canMoveDown: index < order.length - 1, canMoveUp: index > 0, dragX: dragX, dragY: dragY, extra: extras[index], id: item.id, isActive: item.id === activeId, isDisabled: isDisabled, isReady: isReady, label: item.label, labels: labels, onEnd: end, onMeasure: measure, onMove: moveBy, onStart: start, onUpdate: update, rect: rects[index], children: renderItem({ isActive: item.id === activeId, item }) }, item.id))) }));
 };

package/dist/components/ps-sortable-grid/ps-sortable-item-props.d.ts

@@ -16,7 +16,7 @@ export interface PsSortableItemProps {
     label: string;
     labels: PsSortableGridLabels;
     onEnd: () => void;
-    onMeasure: (id: string, height: number, renderedExtra: number) => void;
+    onMeasure: (id: string, height: number, fill: number) => void;
     onMove: (id: string, delta: number) => void;
     onStart: (id: string, absoluteY: number) => void;
     onUpdate: (translationX: number, translationY: number, absoluteY: number) => void;

package/dist/components/ps-sortable-grid/ps-sortable-item.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import { View } from 'react-native';
 import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { PsSortableGridConfig } from '../../constants/ps-sortable-grid-config';
@@ -11,6 +12,13 @@ export const PsSortableItem = ({ canMoveDown, canMoveUp, children, dragX, dragY,
     const top = useSharedValue(rect.y);
     const scale = useSharedValue(1);
     const wasActive = useRef(false);
+    const laidOut = useRef({ fill: 0, total: null });
+    const fill = isReady ? extra : 0;
+    const report = useCallback(() => {
+        const { fill: laidOutFill, total } = laidOut.current;
+        if (total !== null)
+            onMeasure(id, total, laidOutFill);
+    }, [id, onMeasure]);
     useEffect(() => {
         if (isActive) {
             wasActive.current = true;
@@ -49,12 +57,15 @@ export const PsSortableItem = ({ canMoveDown, canMoveUp, children, dragX, dragY,
         top: isActive ? dragY.value : top.value,
         transform: [{ scale: scale.value }],
     }));
-    return (_jsx(GestureDetector, { gesture: pan, children: _jsx(Animated.View, { accessibilityActions: isDisabled
+    return (_jsx(GestureDetector, { gesture: pan, children: _jsxs(Animated.View, { accessibilityActions: isDisabled
                 ? undefined
                 : [
                     ...(canMoveUp ? [{ label: labels.moveUp, name: 'moveUp' }] : []),
                     ...(canMoveDown ? [{ label: labels.moveDown, name: 'moveDown' }] : []),
-                ], accessibilityLabel: label, accessible: !isDisabled, collapsable: false, onAccessibilityAction: (event) => onMove(id, event.nativeEvent.actionName === 'moveUp' ? -1 : 1), onLayout: (event) => onMeasure(id, event.nativeEvent.layout.height, isReady ? extra : 0), style: [
+                ], accessibilityLabel: label, accessible: !isDisabled, collapsable: false, onAccessibilityAction: (event) => onMove(id, event.nativeEvent.actionName === 'moveUp' ? -1 : 1), onLayout: (event) => {
+                laidOut.current.total = event.nativeEvent.layout.height;
+                report();
+            }, style: [
                 {
                     borderRadius: PsSortableGridConfig.radius,
                     opacity: isReady ? 1 : 0,
@@ -71,5 +82,8 @@ export const PsSortableItem = ({ canMoveDown, canMoveUp, children, dragX, dragY,
                     }
                     : undefined,
                 animatedStyle,
-            ], children: _jsx(PsWidgetFillContext.Provider, { value: isReady ? extra : 0, children: children }) }) }));
+            ], children: [_jsx(View, { onLayout: (event) => {
+                        laidOut.current.fill = event.nativeEvent.layout.height;
+                        report();
+                    }, pointerEvents: 'none', style: { height: fill, left: 0, position: 'absolute', top: 0, width: 0 }, testID: PsSortableGridConfig.fillTestId }), _jsx(PsWidgetFillContext.Provider, { value: fill, children: children })] }) }));
 };

package/dist/constants/ps-chart-bar-corner.d.ts

@@ -0,0 +1,6 @@
+export declare const PsChartBarCorner: {
+    readonly Both: "both";
+    readonly None: "none";
+    readonly Value: "value";
+};
+export type PsChartBarCorner = (typeof PsChartBarCorner)[keyof typeof PsChartBarCorner];

package/dist/constants/ps-chart-bar-corner.js

@@ -0,0 +1,5 @@
+export const PsChartBarCorner = {
+    Both: 'both',
+    None: 'none',
+    Value: 'value',
+};

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

@@ -6,6 +6,7 @@ export declare const PsChartConfig: {
     readonly axisTickGap: 6;
     readonly barGapRatio: 0.3;
     readonly barRadius: 4;
+    readonly barRadiusWidthRatio: number;
     readonly charWidthRatio: 0.62;
     readonly compactBarGapRatio: 0.15;
     readonly compactSlot: 24;
@@ -18,9 +19,11 @@ export declare const PsChartConfig: {
     readonly donutCenterFontMax: 18;
     readonly donutCenterFontMin: 11;
     readonly donutCenterPadding: 8;
+    readonly donutDimmedOpacity: 0.4;
     readonly donutGap: 16;
     readonly donutMinLegendWidth: 120;
-    readonly donutSliceGap: 2;
+    readonly donutRevealOverlap: 2;
+    readonly donutSliceGap: 3;
     readonly drawMs: 700;
     readonly ellipsis: "…";
     readonly gridLineCount: 3;

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

@@ -6,6 +6,7 @@ export const PsChartConfig = {
     axisTickGap: 6,
     barGapRatio: 0.3,
     barRadius: 4,
+    barRadiusWidthRatio: 1 / 3,
     charWidthRatio: 0.62,
     compactBarGapRatio: 0.15,
     compactSlot: 24,
@@ -18,9 +19,11 @@ export const PsChartConfig = {
     donutCenterFontMax: 18,
     donutCenterFontMin: 11,
     donutCenterPadding: 8,
+    donutDimmedOpacity: 0.4,
     donutGap: 16,
     donutMinLegendWidth: 120,
-    donutSliceGap: 2,
+    donutRevealOverlap: 2,
+    donutSliceGap: 3,
     drawMs: 700,
     ellipsis: '…',
     gridLineCount: 3,

package/dist/constants/ps-menu-popup-config.d.ts

@@ -8,4 +8,8 @@ export declare const PsMenuPopupConfig: {
     readonly remeasureMs: 250;
     readonly rowHeight: 48;
     readonly rowPaddingHorizontal: 16;
+    readonly tileFontSize: 14;
+    readonly tileLogoPadding: 3;
+    readonly tileRadius: 8;
+    readonly tileSize: 28;
 };

package/dist/constants/ps-menu-popup-config.js

@@ -8,4 +8,8 @@ export const PsMenuPopupConfig = {
     remeasureMs: 250,
     rowHeight: 48,
     rowPaddingHorizontal: 16,
+    tileFontSize: 14,
+    tileLogoPadding: 3,
+    tileRadius: 8,
+    tileSize: 28,
 };

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

@@ -1,6 +1,7 @@
 export declare const PsSheetConfig: {
     readonly actionMinWidth: 44;
     readonly actionSpinnerGap: 6;
+    readonly androidHeaderPaddingTop: 0;
     readonly cornerRadius: 20;
     readonly formSizingMinIos: 18;
     readonly headerMinHeight: 64;

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

@@ -1,6 +1,7 @@
 export const PsSheetConfig = {
     actionMinWidth: 44,
     actionSpinnerGap: 6,
+    androidHeaderPaddingTop: 0,
     cornerRadius: 20,
     formSizingMinIos: 18,
     headerMinHeight: 64,

package/dist/constants/ps-sortable-grid-config.d.ts

@@ -4,6 +4,7 @@ export declare const PsSortableGridConfig: {
     readonly columnGap: 12;
     readonly compactUnits: 2;
     readonly edgeRatio: 0.14;
+    readonly fillTestId: "ps-sortable-fill";
     readonly fullUnits: 2;
     readonly holdTolerance: 8;
     readonly longPressMs: 400;
@@ -17,4 +18,5 @@ export declare const PsSortableGridConfig: {
     readonly scaleMs: 140;
     readonly scrollRamp: 0.25;
     readonly scrollTickMs: 16;
+    readonly testId: "ps-sortable-grid";
 };

package/dist/constants/ps-sortable-grid-config.js

@@ -6,6 +6,7 @@ export const PsSortableGridConfig = {
     columnGap: PsChartConfig.kpiGap,
     compactUnits: 2,
     edgeRatio: 0.14,
+    fillTestId: 'ps-sortable-fill',
     fullUnits: 2,
     holdTolerance: 8,
     longPressMs: 400,
@@ -19,4 +20,5 @@ export const PsSortableGridConfig = {
     scaleMs: 140,
     scrollRamp: 0.25,
     scrollTickMs: 16,
+    testId: 'ps-sortable-grid',
 };

package/dist/interfaces/ps-chart-arc-data.d.ts

@@ -0,0 +1,9 @@
+export interface PsChartArcData {
+    centre: number;
+    end: number;
+    gap: number;
+    inner: number;
+    outer: number;
+    radius: number;
+    start: number;
+}

package/dist/interfaces/ps-chart-arc-data.js

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

package/dist/interfaces/ps-chart-bar-rect.d.ts

@@ -1,5 +1,7 @@
+import type { PsChartBarCorner } from '../constants/ps-chart-bar-corner';
 export interface PsChartBarRect {
     color: string;
+    corner: PsChartBarCorner;
     height: number;
     id: string;
     isNegative: boolean;

package/dist/interfaces/ps-donut-slice-data.d.ts

@@ -1,7 +1,5 @@
 export interface PsDonutSliceData {
     color: string;
-    dashLength: number;
-    dashOffset: number;
     id: string;
-    start: number;
+    path: string;
 }

package/dist/interfaces/ps-menu-item.d.ts

@@ -13,5 +13,6 @@ export interface PsMenuItem {
     monogram?: string;
     onSelect: () => void;
     subtitle?: string;
+    tileColor?: string;
     tone?: PsMenuItemTone;
 }

package/dist/interfaces/ps-menu-tile-request.d.ts

@@ -3,5 +3,6 @@ export interface PsMenuTileRequest {
     imageUri?: string;
     key: string;
     shape: PsMenuTileShape;
+    tileColor?: string;
     text: string;
 }

package/dist/interfaces/ps-sortable-measure-data.d.ts

@@ -0,0 +1,4 @@
+export interface PsSortableMeasureData {
+    fill: number;
+    total: number | null;
+}

package/dist/interfaces/ps-sortable-measure-data.js

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

package/dist/services/ps-chart-arc-service.d.ts

@@ -0,0 +1,14 @@
+import type { PsChartArcData } from '../interfaces/ps-chart-arc-data';
+export declare class PsChartArcService {
+    static sector(arc: PsChartArcData): string;
+    static ring(centre: number, inner: number, outer: number): string;
+    static minimumAngle(gap: number, radius: number, inner: number): number;
+    private static largeFlag;
+    private static angleOf;
+    private static cornerRadius;
+    private static corner;
+    private static edge;
+    private static at;
+    private static scale;
+    private static text;
+}

package/dist/services/ps-chart-arc-service.js

@@ -0,0 +1,83 @@
+export class PsChartArcService {
+    static sector(arc) {
+        const half = arc.gap / 2;
+        const radius = PsChartArcService.cornerRadius(arc);
+        const outerStart = PsChartArcService.corner(arc, arc.start, 1, arc.outer - radius, radius, half);
+        const outerEnd = PsChartArcService.corner(arc, arc.end, -1, arc.outer - radius, radius, half);
+        const innerEnd = PsChartArcService.corner(arc, arc.end, -1, arc.inner + radius, radius, half);
+        const innerStart = PsChartArcService.corner(arc, arc.start, 1, arc.inner + radius, radius, half);
+        const outerStartRim = PsChartArcService.scale(arc, outerStart, arc.outer / (arc.outer - radius));
+        const outerEndRim = PsChartArcService.scale(arc, outerEnd, arc.outer / (arc.outer - radius));
+        const innerEndRim = PsChartArcService.scale(arc, innerEnd, arc.inner / (arc.inner + radius));
+        const innerStartRim = PsChartArcService.scale(arc, innerStart, arc.inner / (arc.inner + radius));
+        const startOuterEdge = PsChartArcService.edge(arc, arc.start, 1, outerStart, half);
+        const endOuterEdge = PsChartArcService.edge(arc, arc.end, -1, outerEnd, half);
+        const endInnerEdge = PsChartArcService.edge(arc, arc.end, -1, innerEnd, half);
+        const startInnerEdge = PsChartArcService.edge(arc, arc.start, 1, innerStart, half);
+        return [
+            `M${PsChartArcService.text(startOuterEdge)}`,
+            `A${radius} ${radius} 0 0 1 ${PsChartArcService.text(outerStartRim)}`,
+            `A${arc.outer} ${arc.outer} 0 ${PsChartArcService.largeFlag(arc, outerStartRim, outerEndRim)} 1 ${PsChartArcService.text(outerEndRim)}`,
+            `A${radius} ${radius} 0 0 1 ${PsChartArcService.text(endOuterEdge)}`,
+            `L${PsChartArcService.text(endInnerEdge)}`,
+            `A${radius} ${radius} 0 0 1 ${PsChartArcService.text(innerEndRim)}`,
+            `A${arc.inner} ${arc.inner} 0 ${PsChartArcService.largeFlag(arc, innerStartRim, innerEndRim)} 0 ${PsChartArcService.text(innerStartRim)}`,
+            `A${radius} ${radius} 0 0 1 ${PsChartArcService.text(startInnerEdge)}`,
+            'Z',
+        ].join(' ');
+    }
+    static ring(centre, inner, outer) {
+        return [
+            `M${centre} ${centre - outer}`,
+            `A${outer} ${outer} 0 1 1 ${centre} ${centre + outer}`,
+            `A${outer} ${outer} 0 1 1 ${centre} ${centre - outer}`,
+            `M${centre} ${centre - inner}`,
+            `A${inner} ${inner} 0 1 0 ${centre} ${centre + inner}`,
+            `A${inner} ${inner} 0 1 0 ${centre} ${centre - inner}`,
+            'Z',
+        ].join(' ');
+    }
+    static minimumAngle(gap, radius, inner) {
+        return inner > 0 ? (gap + 2 * radius + 1) / inner : 0;
+    }
+    static largeFlag(arc, from, to) {
+        const turn = 2 * Math.PI;
+        const span = (((PsChartArcService.angleOf(arc, to) - PsChartArcService.angleOf(arc, from)) % turn) +
+            turn) %
+            turn;
+        return span > Math.PI ? 1 : 0;
+    }
+    static angleOf(arc, point) {
+        return Math.atan2(point.x - arc.centre, arc.centre - point.y);
+    }
+    static cornerRadius(arc) {
+        const room = ((arc.end - arc.start) * arc.inner - arc.gap) / 2;
+        return Math.max(0, Math.min(arc.radius, (arc.outer - arc.inner) / 2, room));
+    }
+    static corner(arc, angle, side, distance, radius, half) {
+        const offset = half + radius;
+        const along = Math.sqrt(Math.max(distance * distance - offset * offset, 0));
+        return PsChartArcService.at(arc, angle, side, along, offset);
+    }
+    static edge(arc, angle, side, centre, half) {
+        const dx = centre.x - arc.centre;
+        const dy = centre.y - arc.centre;
+        const along = dx * Math.sin(angle) - dy * Math.cos(angle);
+        return PsChartArcService.at(arc, angle, side, along, half);
+    }
+    static at(arc, angle, side, along, across) {
+        return {
+            x: arc.centre + along * Math.sin(angle) + side * across * Math.cos(angle),
+            y: arc.centre - along * Math.cos(angle) + side * across * Math.sin(angle),
+        };
+    }
+    static scale(arc, point, ratio) {
+        return {
+            x: arc.centre + (point.x - arc.centre) * ratio,
+            y: arc.centre + (point.y - arc.centre) * ratio,
+        };
+    }
+    static text(point) {
+        return `${point.x.toFixed(2)} ${point.y.toFixed(2)}`;
+    }
+}

package/dist/services/ps-chart-bar-service.d.ts

@@ -9,5 +9,7 @@ export declare class PsChartBarService {
     static stacked(data: PsAreaChartDatum[], series: PsCartesianChartSeries[], colors: string[], domain: PsChartDomain, plot: PsChartPlot): PsChartBarRect[];
     static slot(count: number, plot: PsChartPlot): number;
     static group(slot: number, size: number): PsChartBarGroup;
+    static lastIndex(values: number[], sign: number): number;
+    static radius(rect: PsChartBarRect): number;
     private static rect;
 }

package/dist/services/ps-chart-bar-service.js

@@ -1,3 +1,4 @@
+import { PsChartBarCorner } from '../constants/ps-chart-bar-corner';
 import { PsChartConfig } from '../constants/ps-chart-config';
 import { PsChartScaleService } from './ps-chart-scale-service';
 import { PsChartSeriesService } from './ps-chart-series-service';
@@ -10,7 +11,7 @@ export class PsChartBarService {
             const value = PsChartSeriesService.value(datum, entry.dataKey);
             const top = PsChartScaleService.y(value, domain, plot);
             const left = plot.left + row * slot + offset + column * width;
-            return PsChartBarService.rect(`${row}:${entry.dataKey}`, colors[column], left, width, zero, top, value < 0);
+            return PsChartBarService.rect(`${row}:${entry.dataKey}`, colors[column], left, width, zero, top, value < 0, PsChartBarCorner.Value);
         }));
     }
     static stacked(data, series, colors, domain, plot) {
@@ -19,6 +20,9 @@ export class PsChartBarService {
         return data.flatMap((datum, row) => {
             let positive = 0;
             let negative = 0;
+            const values = series.map((entry) => PsChartSeriesService.value(datum, entry.dataKey));
+            const outerPositive = PsChartBarService.lastIndex(values, 1);
+            const outerNegative = PsChartBarService.lastIndex(values, -1);
             return series.map((entry, column) => {
                 const value = PsChartSeriesService.value(datum, entry.dataKey);
                 const from = value < 0 ? negative : positive;
@@ -27,7 +31,9 @@ export class PsChartBarService {
                     negative = to;
                 else
                     positive = to;
-                return PsChartBarService.rect(`${row}:${entry.dataKey}`, colors[column], plot.left + row * slot + offset, width, PsChartScaleService.y(from, domain, plot), PsChartScaleService.y(to, domain, plot), value < 0);
+                return PsChartBarService.rect(`${row}:${entry.dataKey}`, colors[column], plot.left + row * slot + offset, width, PsChartScaleService.y(from, domain, plot), PsChartScaleService.y(to, domain, plot), value < 0, column === outerPositive || column === outerNegative
+                    ? PsChartBarCorner.Value
+                    : PsChartBarCorner.None);
             });
         });
     }
@@ -41,9 +47,18 @@ export class PsChartBarService {
         const total = Math.max(slot * (1 - gap), Math.min(PsChartConfig.minBarWidth * size, slot));
         return { offset: (slot - total) / 2, width: total / size };
     }
-    static rect(id, color, x, width, from, to, isNegative) {
+    static lastIndex(values, sign) {
+        return values.reduce((last, value, index) => (Math.sign(value) === sign ? index : last), -1);
+    }
+    static radius(rect) {
+        if (rect.corner === PsChartBarCorner.None)
+            return 0;
+        return Math.min(PsChartConfig.barRadius, rect.width * PsChartConfig.barRadiusWidthRatio);
+    }
+    static rect(id, color, x, width, from, to, isNegative, corner) {
         return {
             color,
+            corner,
             height: Math.abs(to - from),
             id,
             isNegative,

package/dist/services/ps-chart-donut-service.d.ts

@@ -6,5 +6,7 @@ export declare class PsChartDonutService {
     static centerFontSize(text: string, size: number): number;
     static radius(size: number): number;
     static circumference(size: number): number;
+    static inner(size: number): number;
     static slices(data: PsDonutChartDatum[], colors: string[], size: number): PsDonutSliceData[];
+    static angles(shares: number[], minimum: number): number[];
 }

package/dist/services/ps-chart-donut-service.js

@@ -1,4 +1,5 @@
 import { PsChartConfig } from '../constants/ps-chart-config';
+import { PsChartArcService } from './ps-chart-arc-service';
 import { PsChartTextService } from './ps-chart-text-service';
 export class PsChartDonutService {
     static layout(width, height) {
@@ -17,23 +18,52 @@ export class PsChartDonutService {
     static circumference(size) {
         return 2 * Math.PI * PsChartDonutService.radius(size);
     }
+    static inner(size) {
+        return Math.max(size / 2 - PsChartConfig.donutThickness, 0);
+    }
     static slices(data, colors, size) {
-        const circumference = PsChartDonutService.circumference(size);
-        const total = data.reduce((sum, datum) => sum + datum.share, 0);
+        const shares = data.map((datum) => Math.max(datum.share, 0));
+        const total = shares.reduce((sum, share) => sum + share, 0);
         if (total <= 0)
             return [];
-        let start = 0;
-        return data.map((datum, index) => {
-            const length = (datum.share / total) * circumference;
-            const slice = {
+        const centre = size / 2;
+        const outer = centre;
+        const inner = PsChartDonutService.inner(size);
+        const shown = shares.filter((share) => share > 0).length;
+        if (shown === 1)
+            return data.map((datum, index) => ({
                 color: colors[index % colors.length],
-                dashLength: Math.max(length - PsChartConfig.donutSliceGap, 0),
-                dashOffset: -start,
                 id: datum.id,
-                start,
-            };
-            start += length;
-            return slice;
+                path: shares[index] > 0 ? PsChartArcService.ring(centre, inner, outer) : '',
+            }));
+        const angles = PsChartDonutService.angles(shares, PsChartArcService.minimumAngle(PsChartConfig.donutSliceGap, PsChartConfig.barRadius, inner));
+        let start = 0;
+        return data.map((datum, index) => {
+            const end = start + angles[index];
+            const path = angles[index] > 0
+                ? PsChartArcService.sector({
+                    centre,
+                    end,
+                    gap: PsChartConfig.donutSliceGap,
+                    inner,
+                    outer,
+                    radius: PsChartConfig.barRadius,
+                    start,
+                })
+                : '';
+            start = end;
+            return { color: colors[index % colors.length], id: datum.id, path };
         });
     }
+    static angles(shares, minimum) {
+        const turn = 2 * Math.PI;
+        const shown = shares.filter((share) => share > 0).length;
+        const floor = Math.min(minimum, turn / Math.max(shown, 1));
+        const total = shares.reduce((sum, share) => sum + share, 0);
+        const isSmall = shares.map((share) => share > 0 && (share / total) * turn < floor);
+        const smallCount = isSmall.filter(Boolean).length;
+        const largeTotal = shares.reduce((sum, share, index) => (isSmall[index] ? sum : sum + share), 0);
+        const left = turn - smallCount * floor;
+        return shares.map((share, index) => share <= 0 ? 0 : isSmall[index] ? floor : largeTotal > 0 ? (share / largeTotal) * left : 0);
+    }
 }

package/dist/services/ps-menu-tile-service.js

@@ -4,14 +4,14 @@ export class PsMenuTileService {
         if (!PsActionMenuService.hasAvatar(item))
             return null;
         const text = PsMenuTileService.letter(item.monogram === undefined ? item.label : item.monogram);
-        return PsMenuTileService.request('rounded', item.imageUri, text);
+        return PsMenuTileService.request('rounded', item.imageUri, text, item.tileColor);
     }
     static headerRequest(header) {
         if (header === undefined)
             return null;
         if (header.imageUri === undefined && header.initials === undefined)
             return null;
-        return PsMenuTileService.request('circle', header.imageUri, header.initials === undefined ? '' : header.initials.trim().toUpperCase());
+        return PsMenuTileService.request('circle', header.imageUri, header.initials === undefined ? '' : header.initials.trim().toUpperCase(), undefined);
     }
     static requests(header, sections) {
         const all = [
@@ -59,12 +59,18 @@ export class PsMenuTileService {
             return [item];
         return [item, ...item.children.flatMap((child) => PsMenuTileService.tree(child))];
     }
-    static request(shape, imageUri, text) {
+    static request(shape, imageUri, text, tileColor) {
         return {
             imageUri,
-            key: [shape, imageUri === undefined ? '' : imageUri, text].join('|'),
+            key: [
+                shape,
+                imageUri === undefined ? '' : imageUri,
+                text,
+                tileColor === undefined ? '' : tileColor,
+            ].join('|'),
             shape,
             text,
+            tileColor,
         };
     }
 }

package/dist/services/ps-sheet-service.d.ts

@@ -7,6 +7,7 @@ export declare class PsSheetService {
     static fittedMaxWidth(windowWidth: number, layoutClass: PsLayoutClass): number | undefined;
     static supportsFormSizing(iosVersion: string | number): boolean;
     static handlesInset(os: string): boolean;
+    static headerPaddingTop(os: string): number;
     static bottomPadding(isFloating: boolean, bottomInset: number): number;
     static fittedHeight(headerHeight: number, bodyHeight: number, windowHeight: number, layoutClass?: PsLayoutClass): number;
     static raisedHeight(height: number, keyboardHeight: number, windowHeight: number, topInset: number): number;

package/dist/services/ps-sheet-service.js

@@ -20,6 +20,9 @@ export class PsSheetService {
     static handlesInset(os) {
         return os === 'ios' || os === 'android';
     }
+    static headerPaddingTop(os) {
+        return os === 'android' ? PsSheetConfig.androidHeaderPaddingTop : PsSheetConfig.headerPaddingTop;
+    }
     static bottomPadding(isFloating, bottomInset) {
         return PsLayoutConfig.sheetGutter + (isFloating ? 0 : bottomInset);
     }

package/dist/services/ps-waterfall-service.js

@@ -1,3 +1,4 @@
+import { PsChartBarCorner } from '../constants/ps-chart-bar-corner';
 import { PsChartBarService } from './ps-chart-bar-service';
 import { PsChartScaleService } from './ps-chart-scale-service';
 export class PsWaterfallService {
@@ -25,6 +26,7 @@ export class PsWaterfallService {
             const to = PsChartScaleService.y(step.end, domain, plot);
             return {
                 color: step.isTotal ? colors[2] : step.value < 0 ? colors[1] : colors[0],
+                corner: step.isTotal ? PsChartBarCorner.Value : PsChartBarCorner.Both,
                 height: Math.abs(to - from),
                 id: `${row}:${step.label}`,
                 isNegative: step.end < step.start,

package/package.json

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