@pallasoft/ps-mobile-components 1.7.0 → 1.8.0

package/dist/components/ps-accessibility-gate/index.d.ts

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

package/dist/components/ps-accessibility-gate/index.js

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

package/dist/components/ps-accessibility-gate/ps-accessibility-gate-props.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export interface PsAccessibilityGateProps {
+    children: ReactNode;
+    isHidden: boolean;
+}

package/dist/components/ps-accessibility-gate/ps-accessibility-gate-props.js

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

package/dist/components/ps-accessibility-gate/ps-accessibility-gate.d.ts

@@ -0,0 +1,2 @@
+import type { PsAccessibilityGateProps } from './ps-accessibility-gate-props';
+export declare const PsAccessibilityGate: ({ children, isHidden }: PsAccessibilityGateProps) => import("react").JSX.Element;

package/dist/components/ps-accessibility-gate/ps-accessibility-gate.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsAccessibilityConfig } from '../../constants/ps-accessibility-config';
+export const PsAccessibilityGate = ({ children, isHidden }) => (_jsx(View, { accessibilityElementsHidden: isHidden, importantForAccessibility: isHidden ? PsAccessibilityConfig.hiddenImportance : PsAccessibilityConfig.visibleImportance, style: { flex: 1 }, testID: 'ps-accessibility-gate', children: children }));

package/dist/components/ps-app-lock-screen/ps-app-lock-screen.js

@@ -5,7 +5,7 @@ import { PsAppLockConfig } from '../../constants/ps-app-lock-config';
 import { PsButton } from '../ps-button/ps-button';
 import { PsPrivacyCover } from '../ps-privacy-cover/ps-privacy-cover';
 import { PsTextLink } from '../ps-text-link/ps-text-link';
-export const PsAppLockScreen = ({ children, isUnlocking = false, onSignOut, onUnlock, signOutLabel, unlockLabel, }) => (_jsx(PsPrivacyCover, { children: _jsx(SafeAreaView, { style: {
+export const PsAppLockScreen = ({ children, isUnlocking = false, onSignOut, onUnlock, signOutLabel, unlockLabel, }) => (_jsx(PsPrivacyCover, { shouldTakeFocus: true, children: _jsx(SafeAreaView, { style: {
             alignItems: 'center',
             flex: 1,
             justifyContent: 'center',

package/dist/components/ps-cartesian-chart/ps-cartesian-chart.d.ts

@@ -1,2 +1,2 @@
 import type { PsCartesianChartProps } from './ps-cartesian-chart-props';
-export declare const PsCartesianChart: ({ data, emptyLabel, formatTick, formatValue, height, isLoading, kind, series, showLegend, }: PsCartesianChartProps) => import("react").JSX.Element;
+export declare const PsCartesianChart: ({ data, emptyLabel, formatTick, formatValue, height: baseHeight, isLoading, kind, series, showLegend, }: PsCartesianChartProps) => import("react").JSX.Element;

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

@@ -7,47 +7,55 @@ import { usePsChartReveal } from '../../hooks/use-ps-chart-reveal';
 import { usePsChartScrub } from '../../hooks/use-ps-chart-scrub';
 import { usePsChartWidth } from '../../hooks/use-ps-chart-width';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { usePsWidgetFill } from '../../hooks/use-ps-widget-fill';
+import { PsChartAxisService } from '../../services/ps-chart-axis-service';
 import { PsChartBarService } from '../../services/ps-chart-bar-service';
 import { PsChartKindService } from '../../services/ps-chart-kind-service';
 import { PsChartReadoutService } from '../../services/ps-chart-readout-service';
 import { PsChartScaleService } from '../../services/ps-chart-scale-service';
 import { PsChartSeriesService } from '../../services/ps-chart-series-service';
 import { PsChartShapeService } from '../../services/ps-chart-shape-service';
+import { PsChartTextService } from '../../services/ps-chart-text-service';
 import { PsChartBar } from '../ps-chart-bar/ps-chart-bar';
 import { PsChartEmptyState } from '../ps-chart-empty-state/ps-chart-empty-state';
 import { PsChartLegend } from '../ps-chart-legend/ps-chart-legend';
 import { PsChartLine } from '../ps-chart-line/ps-chart-line';
 import { PsChartReadout } from '../ps-chart-readout/ps-chart-readout';
 import { PsChartSkeleton } from '../ps-chart-skeleton/ps-chart-skeleton';
-export const PsCartesianChart = ({ data, emptyLabel, formatTick, formatValue, height = PsChartConfig.chartHeight, isLoading = false, kind, series, showLegend = true, }) => {
+export const PsCartesianChart = ({ data, emptyLabel, formatTick, formatValue, height: baseHeight = PsChartConfig.chartHeight, isLoading = false, kind, series, showLegend = true, }) => {
     const theme = usePsMobileTheme();
     const { onLayout, width } = usePsChartWidth();
+    const height = baseHeight + usePsWidgetFill();
     const isBars = PsChartKindService.isBars(kind);
     const isStacked = kind === PsCartesianChartKind.StackedBar;
-    const plot = PsChartScaleService.plot(width, height);
+    const barIndexes = PsChartShapeService.barIndexes(kind, series);
+    const lineIndexes = PsChartShapeService.lineIndexes(kind, series);
+    const barSeries = barIndexes.map((position) => series[position]);
+    const lineSeries = lineIndexes.map((position) => series[position]);
+    const domain = PsChartScaleService.domain(isStacked
+        ? [
+            ...PsChartSeriesService.stackedValues(data, barSeries),
+            ...PsChartSeriesService.values(data, lineSeries),
+        ]
+        : PsChartSeriesService.values(data, series));
+    const tickLabels = PsChartScaleService.ticks(domain).map((tick) => formatTick(tick));
+    const yAxisWidth = PsChartAxisService.yAxisWidth(tickLabels, width);
+    const plot = PsChartScaleService.plot(width, height, yAxisWidth);
     const { index, panHandlers } = usePsChartScrub(data.length, isBars, plot);
     const progress = usePsChartReveal(PsChartSeriesService.signature(kind, data, series));
     if (isLoading)
-        return _jsx(PsChartSkeleton, { height: height, variant: PsChartKindService.skeletonVariant(kind) });
+        return (_jsx(PsChartSkeleton, { height: baseHeight, variant: PsChartKindService.skeletonVariant(kind) }));
     if (data.length === 0 || PsChartSeriesService.isEmpty(data, series))
-        return _jsx(PsChartEmptyState, { height: height, label: emptyLabel });
+        return _jsx(PsChartEmptyState, { height: baseHeight, label: emptyLabel });
     const colors = series.map((entry, position) => PsChartSeriesService.color({
         count: series.length,
         explicit: entry.color,
         index: position,
         theme,
     }));
-    const barIndexes = PsChartShapeService.barIndexes(kind, series);
-    const lineIndexes = PsChartShapeService.lineIndexes(kind, series);
-    const barSeries = barIndexes.map((position) => series[position]);
     const barColors = barIndexes.map((position) => colors[position]);
-    const lineSeries = lineIndexes.map((position) => series[position]);
-    const domain = PsChartScaleService.domain(isStacked
-        ? [
-            ...PsChartSeriesService.stackedValues(data, barSeries),
-            ...PsChartSeriesService.values(data, lineSeries),
-        ]
-        : PsChartSeriesService.values(data, series));
+    const xLabels = PsChartAxisService.xLabels(data.map((row) => row.label), plot.right - plot.left, isBars);
+    const readoutLines = PsChartReadoutService.maxLines(data.map((row) => PsChartReadoutService.items(row, series, colors, formatValue)), width);
     const selected = index === null ? data.length - 1 : index;
     const datum = data[selected];
     const items = PsChartReadoutService.items(datum, series, colors, formatValue);
@@ -57,10 +65,10 @@ export const PsCartesianChart = ({ data, emptyLabel, formatTick, formatValue, he
         : isStacked
             ? PsChartBarService.stacked(data, barSeries, barColors, domain, plot)
             : PsChartBarService.grouped(data, barSeries, barColors, domain, plot);
-    return (_jsxs(View, { style: { gap: 8 }, children: [_jsx(PsChartReadout, { items: items, title: datum.label }), _jsx(View, { accessible: true, accessibilityLabel: PsChartReadoutService.summary(datum.label, items), accessibilityRole: 'image', onLayout: onLayout, style: { height }, children: width === 0 ? null : (_jsxs(_Fragment, { children: [_jsxs(Svg, { height: height, pointerEvents: 'none', width: width, children: [PsChartScaleService.ticks(domain).map((tick) => {
+    return (_jsxs(View, { style: { gap: 8 }, children: [_jsx(PsChartReadout, { items: items, lines: readoutLines, title: datum.label }), _jsx(View, { accessible: true, accessibilityLabel: PsChartReadoutService.summary(datum.label, items), accessibilityRole: 'image', onLayout: onLayout, style: { height }, children: width === 0 ? null : (_jsxs(_Fragment, { children: [_jsxs(Svg, { height: height, pointerEvents: 'none', width: width, children: [PsChartScaleService.ticks(domain).map((tick, tickIndex) => {
                                     const y = PsChartScaleService.y(tick, domain, plot);
-                                    return (_jsxs(G, { children: [_jsx(Line, { stroke: theme.line, strokeWidth: PsChartConfig.gridLineWidth, x1: plot.left, x2: plot.right, y1: y, y2: y }), _jsx(SvgText, { fill: theme.muted, fontFamily: theme.fonts.medium, fontSize: PsChartConfig.axisLabelSize, textAnchor: 'end', x: plot.left - 6, y: y + 3, children: formatTick(tick) })] }, tick));
-                                }), PsChartScaleService.labelIndexes(data.length).map((position) => (_jsx(SvgText, { fill: theme.muted, fontFamily: theme.fonts.medium, fontSize: PsChartConfig.axisLabelSize, textAnchor: PsChartScaleService.labelAnchor(position, data.length, isBars), x: xAt(position), y: height - 6, children: data[position].label }, position))), rects.map((rect) => (_jsx(PsChartBar, { progress: progress, rect: rect }, rect.id))), lineSeries.map((entry, lineIndex) => {
+                                    return (_jsxs(G, { children: [_jsx(Line, { stroke: theme.line, strokeWidth: PsChartConfig.gridLineWidth, x1: plot.left, x2: plot.right, y1: y, y2: y }), _jsx(SvgText, { fill: theme.muted, fontFamily: theme.fonts.medium, fontSize: PsChartConfig.axisLabelSize, textAnchor: 'end', x: plot.left - PsChartConfig.axisTickGap, y: y + PsChartConfig.axisLabelSize / 3, children: PsChartTextService.fit(tickLabels[tickIndex], plot.left - PsChartConfig.axisTickGap, PsChartConfig.axisLabelSize) })] }, tick));
+                                }), xLabels.indexes.map((position) => (_jsx(SvgText, { fill: theme.muted, fontFamily: theme.fonts.medium, fontSize: PsChartConfig.axisLabelSize, textAnchor: PsChartScaleService.labelAnchor(position, data.length, isBars), x: xAt(position), y: height - 6, children: PsChartTextService.fit(data[position].label, xLabels.maxWidth, PsChartConfig.axisLabelSize) }, position))), rects.map((rect) => (_jsx(PsChartBar, { progress: progress, rect: rect }, rect.id))), lineSeries.map((entry, lineIndex) => {
                                     const position = lineIndexes[lineIndex];
                                     const points = data.map((row, rowIndex) => ({
                                         x: xAt(rowIndex),

package/dist/components/ps-chart-empty-state/ps-chart-empty-state.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { PsChartConfig } from '../../constants/ps-chart-config';
+import { usePsWidgetFill } from '../../hooks/use-ps-widget-fill';
 import { PsText } from '../ps-text/ps-text';
-export const PsChartEmptyState = ({ height = PsChartConfig.chartHeight, label, }) => (_jsx(View, { style: { alignItems: 'center', height, justifyContent: 'center' }, testID: 'ps-chart-empty-state', children: _jsx(PsText, { align: 'center', tone: 'muted', children: label }) }));
+export const PsChartEmptyState = ({ height = PsChartConfig.chartHeight, label, }) => {
+    const fill = usePsWidgetFill();
+    return (_jsx(View, { style: { alignItems: 'center', height: height + fill, justifyContent: 'center' }, testID: 'ps-chart-empty-state', children: _jsx(PsText, { align: 'center', tone: 'muted', children: label }) }));
+};

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

@@ -1,6 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View } from 'react-native';
+import { PsChartConfig } from '../../constants/ps-chart-config';
+import { usePsChartWidth } from '../../hooks/use-ps-chart-width';
+import { PsChartTextService } from '../../services/ps-chart-text-service';
 import { PsCard } from '../ps-card/ps-card';
 import { PsChartDeltaBadge } from '../ps-chart-delta-badge/ps-chart-delta-badge';
 import { PsText } from '../ps-text/ps-text';
-export const PsChartFrame = ({ children, delta, period, title, value }) => (_jsx(PsCard, { style: { gap: 12 }, children: _jsxs(View, { style: { gap: 12 }, testID: 'ps-chart-frame', children: [title === undefined && value === undefined ? null : (_jsxs(View, { style: { gap: 4 }, children: [title === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'label', children: title })), value === undefined ? null : (_jsx(PsText, { numberOfLines: 1, style: { fontSize: 24, lineHeight: 30 }, variant: 'numeric', weight: 'bold', children: value })), delta === undefined ? null : _jsx(PsChartDeltaBadge, { ...delta }), period === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'caption', children: period }))] })), children] }) }));
+export const PsChartFrame = ({ children, delta, period, title, value }) => {
+    const { onLayout, width } = usePsChartWidth();
+    const size = value === undefined
+        ? PsChartConfig.kpiValueFontMax
+        : PsChartTextService.fontSize(value, width, PsChartConfig.kpiValueFontMax, PsChartConfig.kpiValueFontMin);
+    return (_jsx(PsCard, { style: { gap: 12 }, children: _jsxs(View, { onLayout: onLayout, style: { gap: 12 }, testID: 'ps-chart-frame', children: [title === undefined && value === undefined ? null : (_jsxs(View, { style: { gap: 4 }, children: [title === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'label', children: title })), value === undefined ? null : (_jsx(PsText, { numberOfLines: 1, style: { fontSize: size, lineHeight: Math.round(size * 1.25) }, variant: 'numeric', weight: 'bold', children: value })), delta === undefined ? null : _jsx(PsChartDeltaBadge, { ...delta }), period === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'caption', children: period }))] })), children] }) }));
+};

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

@@ -3,15 +3,24 @@ import { Pressable, View } from 'react-native';
 import { PsChartConfig } from '../../constants/ps-chart-config';
 import { PsText } from '../ps-text/ps-text';
 export const PsChartLegend = ({ activeIndex = null, items, onPressItem }) => {
-    return (_jsx(View, { style: { gap: 6 }, testID: 'ps-chart-legend', children: items.map((item, index) => (_jsxs(Pressable, { disabled: onPressItem === undefined, onPress: () => (onPressItem === undefined ? undefined : onPressItem(index)), style: {
+    const isWrapped = items.every((item) => item.value === undefined);
+    return (_jsx(View, { style: isWrapped
+            ? {
+                columnGap: PsChartConfig.readoutItemGap,
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                rowGap: 6,
+            }
+            : { gap: 6 }, testID: 'ps-chart-legend', children: items.map((item, index) => (_jsxs(Pressable, { hitSlop: PsChartConfig.legendHitSlop, disabled: onPressItem === undefined, onPress: () => (onPressItem === undefined ? undefined : onPressItem(index)), style: {
                 alignItems: 'center',
                 flexDirection: 'row',
                 gap: 8,
+                maxWidth: '100%',
                 opacity: activeIndex === null || activeIndex === index ? 1 : 0.5,
             }, children: [_jsx(View, { style: {
                         backgroundColor: item.color,
                         borderRadius: PsChartConfig.legendDot,
                         height: PsChartConfig.legendDot,
                         width: PsChartConfig.legendDot,
-                    } }), _jsx(PsText, { numberOfLines: 1, style: { flex: 1 }, variant: 'label', children: item.label }), item.value === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'numeric', weight: 'semibold', children: item.value }))] }, item.label))) }));
+                    } }), _jsx(PsText, { numberOfLines: 1, style: isWrapped ? { flexShrink: 1 } : { flex: 1 }, variant: 'label', children: item.label }), item.value === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'numeric', weight: 'semibold', children: item.value }))] }, item.label))) }));
 };

package/dist/components/ps-chart-readout/ps-chart-readout-props.d.ts

@@ -1,5 +1,6 @@
 import type { PsChartReadoutItem } from '../../interfaces/ps-chart-readout-item';
 export interface PsChartReadoutProps {
     items: PsChartReadoutItem[];
+    lines?: number;
     title: string;
 }

package/dist/components/ps-chart-readout/ps-chart-readout.d.ts

@@ -1,2 +1,2 @@
 import type { PsChartReadoutProps } from './ps-chart-readout-props';
-export declare const PsChartReadout: ({ items, title }: PsChartReadoutProps) => import("react").JSX.Element;
+export declare const PsChartReadout: ({ items, lines, title }: PsChartReadoutProps) => import("react").JSX.Element;

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

@@ -1,9 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { PsChartConfig } from '../../constants/ps-chart-config';
+import { PsChartReadoutService } from '../../services/ps-chart-readout-service';
 import { PsText } from '../ps-text/ps-text';
-export const PsChartReadout = ({ items, title }) => {
-    return (_jsxs(View, { style: { height: PsChartConfig.readoutHeight, justifyContent: 'center' }, children: [_jsx(PsText, { tone: 'muted', variant: 'caption', children: title }), _jsx(View, { style: { flexDirection: 'row', flexWrap: 'wrap', gap: 12 }, children: items.map((item) => (_jsxs(View, { style: { alignItems: 'center', flexDirection: 'row', gap: 6 }, children: [_jsx(View, { style: {
+export const PsChartReadout = ({ items, lines = 1, title }) => {
+    return (_jsxs(View, { style: { height: PsChartReadoutService.height(lines), justifyContent: 'center' }, children: [_jsx(PsText, { tone: 'muted', variant: 'caption', children: title }), _jsx(View, { style: {
+                    columnGap: PsChartConfig.readoutItemGap,
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                    rowGap: PsChartConfig.readoutRowGap,
+                }, children: items.map((item) => (_jsxs(View, { style: { alignItems: 'center', flexDirection: 'row', gap: 6 }, children: [_jsx(View, { style: {
                                 backgroundColor: item.color,
                                 borderRadius: PsChartConfig.legendDot,
                                 height: PsChartConfig.legendDot,

package/dist/components/ps-chart-skeleton/ps-chart-skeleton.d.ts

@@ -1,2 +1,2 @@
 import type { PsChartSkeletonProps } from './ps-chart-skeleton-props';
-export declare const PsChartSkeleton: ({ height, label, }: PsChartSkeletonProps) => import("react").JSX.Element;
+export declare const PsChartSkeleton: ({ height: baseHeight, label, }: PsChartSkeletonProps) => import("react").JSX.Element;

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

@@ -2,5 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { PsChartConfig } from '../../constants/ps-chart-config';
 import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { usePsWidgetFill } from '../../hooks/use-ps-widget-fill';
 import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
-export const PsChartSkeleton = ({ height = PsChartConfig.chartHeight, label, }) => (_jsx(View, { accessibilityLabel: label, accessibilityRole: 'progressbar', accessibilityState: { busy: true }, style: { height }, testID: 'ps-chart-skeleton', children: _jsx(PsSkeleton, { height: height, shape: PsSkeletonShape.Block }) }));
+export const PsChartSkeleton = ({ height: baseHeight = PsChartConfig.chartHeight, label, }) => {
+    const height = baseHeight + usePsWidgetFill();
+    return (_jsx(View, { accessibilityLabel: label, accessibilityRole: 'progressbar', accessibilityState: { busy: true }, style: { height }, testID: 'ps-chart-skeleton', children: _jsx(PsSkeleton, { height: height, shape: PsSkeletonShape.Block }) }));
+};

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

@@ -5,7 +5,9 @@ import Svg 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';
+import { usePsChartWidth } from '../../hooks/use-ps-chart-width';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { usePsWidgetFill } from '../../hooks/use-ps-widget-fill';
 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';
@@ -14,14 +16,18 @@ 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, }) => {
     const theme = usePsMobileTheme();
+    const { onLayout, width } = usePsChartWidth();
+    const fill = usePsWidgetFill();
     const [selected, setSelected] = useState(null);
     const progress = usePsChartReveal(data.map((datum) => `${datum.id}:${datum.share}`).join(','));
     if (isLoading)
         return _jsx(PsChartSkeleton, { height: height, variant: PsChartSkeletonVariant.Donut });
-    const slices = PsChartDonutService.slices(data, theme.chart, height);
+    const layout = PsChartDonutService.layout(width, height);
+    const size = layout.size;
+    const slices = PsChartDonutService.slices(data, theme.chart, size);
     if (slices.length === 0)
         return _jsx(PsChartEmptyState, { height: height, label: emptyLabel });
-    const circumference = PsChartDonutService.circumference(height);
+    const circumference = PsChartDonutService.circumference(size);
     const chosen = selected === null ? null : data[selected];
     const readValue = chosen === null
         ? centerValue
@@ -29,16 +35,28 @@ export const PsDonutChart = ({ centerLabel, centerValue, data, emptyLabel, forma
             ? formatShare(chosen.share)
             : chosen.amountLabel;
     const readLabel = chosen === null ? centerLabel : chosen.label;
-    return (_jsxs(View, { style: { alignItems: 'center', flexDirection: 'row', gap: 16 }, children: [_jsxs(View, { style: { height, width: height }, children: [_jsx(Svg, { height: height, width: height, children: slices.map((slice, index) => (_jsx(PsDonutSlice, { circumference: circumference, isDimmed: selected !== null && selected !== index, onPress: () => setSelected(selected === index ? null : index), progress: progress, size: height, slice: slice }, slice.id))) }), _jsxs(View, { pointerEvents: 'none', style: {
+    if (width === 0)
+        return _jsx(View, { onLayout: onLayout, style: { minHeight: height }, testID: 'ps-donut-chart' });
+    const centerSize = readValue === undefined
+        ? PsChartConfig.donutCenterFontMax
+        : PsChartDonutService.centerFontSize(readValue, size);
+    return (_jsxs(View, { onLayout: onLayout, style: {
+            alignItems: 'center',
+            columnGap: PsChartConfig.donutGap,
+            flexDirection: layout.isStacked ? 'column' : 'row',
+            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: {
                             alignItems: 'center',
                             bottom: 0,
                             justifyContent: 'center',
                             left: 0,
-                            padding: PsChartConfig.donutThickness + 8,
+                            padding: PsChartConfig.donutThickness + PsChartConfig.donutCenterPadding,
                             position: 'absolute',
                             right: 0,
                             top: 0,
-                        }, children: [readValue === undefined ? null : (_jsx(PsText, { numberOfLines: 1, style: { fontSize: 18, lineHeight: 24 }, variant: 'numeric', weight: 'bold', children: readValue })), readLabel === undefined ? null : (_jsx(PsText, { align: 'center', numberOfLines: 2, tone: 'muted', variant: 'caption', children: readLabel }))] })] }), _jsx(View, { style: { flex: 1 }, children: _jsx(PsChartLegend, { activeIndex: selected, items: data.map((datum, index) => ({
+                        }, children: [readValue === undefined ? null : (_jsx(PsText, { numberOfLines: 1, style: { fontSize: centerSize, lineHeight: Math.round((centerSize * 4) / 3) }, variant: 'numeric', weight: 'bold', children: readValue })), readLabel === undefined ? null : (_jsx(PsText, { align: 'center', numberOfLines: 2, tone: 'muted', variant: 'caption', children: readLabel }))] })] }), _jsx(View, { style: layout.isStacked ? { alignSelf: 'stretch' } : { flex: 1 }, children: _jsx(PsChartLegend, { activeIndex: selected, items: data.map((datum, index) => ({
                         color: slices[index].color,
                         label: datum.label,
                         value: datum.amountLabel === undefined ? formatShare(datum.share) : datum.amountLabel,

package/dist/components/ps-kpi-card/ps-kpi-card.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
 import { PsChartConfig } from '../../constants/ps-chart-config';
 import { PsChartSkeletonVariant } from '../../constants/ps-chart-skeleton-variant';
+import { usePsWidgetFill } from '../../hooks/use-ps-widget-fill';
 import { PsChartFrame } from '../ps-chart-frame/ps-chart-frame';
 import { PsChartSkeleton } from '../ps-chart-skeleton/ps-chart-skeleton';
 import { PsSparkline } from '../ps-sparkline/ps-sparkline';
 export const PsKpiCard = ({ delta, isLoading = false, period, title, value, values, }) => {
+    const fill = usePsWidgetFill();
     if (isLoading)
         return (_jsx(PsChartFrame, { children: _jsx(PsChartSkeleton, { height: PsChartConfig.sparklineHeight * 2, variant: PsChartSkeletonVariant.Line }) }));
-    return (_jsx(PsChartFrame, { delta: delta, period: period, title: title, value: value, children: values === undefined ? null : _jsx(PsSparkline, { values: values }) }));
+    return (_jsx(PsChartFrame, { delta: delta, period: period, title: title, value: value, children: values === undefined ? (fill > 0 ? (_jsx(View, { style: { height: fill } })) : null) : (_jsx(PsSparkline, { values: values })) }));
 };

package/dist/components/ps-privacy-cover/ps-privacy-cover-props.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
 export interface PsPrivacyCoverProps {
     children?: ReactNode;
+    shouldTakeFocus?: boolean;
 }

package/dist/components/ps-privacy-cover/ps-privacy-cover.d.ts

@@ -1,2 +1,2 @@
 import type { PsPrivacyCoverProps } from './ps-privacy-cover-props';
-export declare const PsPrivacyCover: ({ children }: PsPrivacyCoverProps) => import("react").JSX.Element;
+export declare const PsPrivacyCover: ({ children, shouldTakeFocus }: PsPrivacyCoverProps) => import("react").JSX.Element;

package/dist/components/ps-privacy-cover/ps-privacy-cover.js

@@ -1,11 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import { PallasoftZIndex } from '@pallasoft/ps-design-system';
-import { StyleSheet, View } from 'react-native';
+import { AccessibilityInfo, StyleSheet, View } from 'react-native';
+import { PsAccessibilityConfig } from '../../constants/ps-accessibility-config';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsPageBackdrop } from '../ps-page-backdrop/ps-page-backdrop';
-export const PsPrivacyCover = ({ children }) => {
+export const PsPrivacyCover = ({ children, shouldTakeFocus = false }) => {
     const theme = usePsMobileTheme();
-    return (_jsxs(View, { accessibilityViewIsModal: true, style: [
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!shouldTakeFocus)
+            return;
+        if (ref.current !== null)
+            AccessibilityInfo.sendAccessibilityEvent(ref.current, PsAccessibilityConfig.focusEvent);
+    }, [shouldTakeFocus]);
+    return (_jsxs(View, { accessibilityViewIsModal: true, importantForAccessibility: 'yes', ref: ref, style: [
             StyleSheet.absoluteFill,
             {
                 alignItems: 'center',

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

@@ -31,7 +31,10 @@ export const PsSortableGrid = ({ getItemSpan, isDisabled = false, items, labels,
     });
     const ids = useMemo(() => PsSortableGridService.ids(order), [order]);
     const rects = useMemo(() => PsSortableGridService.layout(order.map((item) => getItemSpan(item)), PsSortableGridService.heights(ids, measured), width), [getItemSpan, ids, measured, order, width]);
+    const extras = useMemo(() => PsSortableGridService.extras(rects, PsSortableGridService.heights(ids, measured)), [ids, measured, rects]);
     const isReady = PsSortableGridService.isMeasured(ids, measured, width);
+    const applied = useRef({});
+    applied.current = Object.fromEntries(ids.map((id, index) => [id, isReady ? extras[index] : 0]));
     const latest = useRef({ items, onReorder, order, rects, scroll, windowHeight, insets });
     latest.current = { insets, items, onReorder, order, rects, scroll, windowHeight };
     useEffect(() => {
@@ -131,10 +134,11 @@ export const PsSortableGrid = ({ getItemSpan, isDisabled = false, items, labels,
         notify(next);
         PsHapticService.play('selection', hasHaptics);
     }, [hasHaptics]);
-    const measure = useCallback((id, height) => {
-        setMeasured((current) => current[id] !== undefined && Math.abs(current[id] - height) < 0.5
+    const measure = useCallback((id, total) => {
+        const natural = PsSortableGridService.natural(total, applied.current[id] === undefined ? 0 : applied.current[id]);
+        setMeasured((current) => current[id] !== undefined && Math.abs(current[id] - natural) < 0.5
             ? current
-            : { ...current, [id]: height });
+            : { ...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, 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) }, 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

@@ -8,6 +8,7 @@ export interface PsSortableItemProps {
     children: ReactNode;
     dragX: SharedValue<number>;
     dragY: SharedValue<number>;
+    extra: number;
     id: string;
     isActive: boolean;
     isDisabled: boolean;

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

@@ -1,2 +1,2 @@
 import type { PsSortableItemProps } from './ps-sortable-item-props';
-export declare const PsSortableItem: ({ canMoveDown, canMoveUp, children, dragX, dragY, id, isActive, isDisabled, isReady, label, labels, onEnd, onMeasure, onMove, onStart, onUpdate, rect, }: PsSortableItemProps) => import("react").JSX.Element;
+export declare const PsSortableItem: ({ canMoveDown, canMoveUp, children, dragX, dragY, extra, id, isActive, isDisabled, isReady, label, labels, onEnd, onMeasure, onMove, onStart, onUpdate, rect, }: PsSortableItemProps) => import("react").JSX.Element;

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

@@ -3,8 +3,9 @@ import { useEffect, useRef } from 'react';
 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';
+import { PsWidgetFillContext } from '../../contexts/ps-widget-fill-context';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
-export const PsSortableItem = ({ canMoveDown, canMoveUp, children, dragX, dragY, id, isActive, isDisabled, isReady, label, labels, onEnd, onMeasure, onMove, onStart, onUpdate, rect, }) => {
+export const PsSortableItem = ({ canMoveDown, canMoveUp, children, dragX, dragY, extra, id, isActive, isDisabled, isReady, label, labels, onEnd, onMeasure, onMove, onStart, onUpdate, rect, }) => {
     const theme = usePsMobileTheme();
     const left = useSharedValue(rect.x);
     const top = useSharedValue(rect.y);
@@ -70,5 +71,5 @@ export const PsSortableItem = ({ canMoveDown, canMoveUp, children, dragX, dragY,
                     }
                     : undefined,
                 animatedStyle,
-            ], children: children }) }));
+            ], children: _jsx(PsWidgetFillContext.Provider, { value: isReady ? extra : 0, children: children }) }) }));
 };

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

@@ -1,2 +1,2 @@
 import type { PsSparklineProps } from './ps-sparkline-props';
-export declare const PsSparkline: ({ color, height, isLoading, showArea, values, }: PsSparklineProps) => import("react").JSX.Element;
+export declare const PsSparkline: ({ color, height: baseHeight, isLoading, showArea, values, }: PsSparklineProps) => import("react").JSX.Element;

package/dist/components/ps-sparkline/ps-sparkline.js

@@ -6,11 +6,13 @@ import { PsChartSkeletonVariant } from '../../constants/ps-chart-skeleton-varian
 import { usePsChartReveal } from '../../hooks/use-ps-chart-reveal';
 import { usePsChartWidth } from '../../hooks/use-ps-chart-width';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { usePsWidgetFill } from '../../hooks/use-ps-widget-fill';
 import { PsChartScaleService } from '../../services/ps-chart-scale-service';
 import { PsChartLine } from '../ps-chart-line/ps-chart-line';
 import { PsChartSkeleton } from '../ps-chart-skeleton/ps-chart-skeleton';
-export const PsSparkline = ({ color, height = PsChartConfig.sparklineHeight, isLoading = false, showArea = true, values, }) => {
+export const PsSparkline = ({ color, height: baseHeight = PsChartConfig.sparklineHeight, isLoading = false, showArea = true, values, }) => {
     const theme = usePsMobileTheme();
+    const height = baseHeight + usePsWidgetFill();
     const { onLayout, width } = usePsChartWidth();
     const progress = usePsChartReveal(values.join(','));
     if (isLoading)

package/dist/components/ps-waterfall-chart/ps-waterfall-chart.d.ts

@@ -1,2 +1,2 @@
 import type { PsWaterfallChartProps } from './ps-waterfall-chart-props';
-export declare const PsWaterfallChart: ({ data, emptyLabel, formatTick, formatValue, height, isLoading, }: PsWaterfallChartProps) => import("react").JSX.Element;
+export declare const PsWaterfallChart: ({ data, emptyLabel, formatTick, formatValue, height: baseHeight, isLoading, }: PsWaterfallChartProps) => import("react").JSX.Element;

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

@@ -7,31 +7,37 @@ import { usePsChartReveal } from '../../hooks/use-ps-chart-reveal';
 import { usePsChartScrub } from '../../hooks/use-ps-chart-scrub';
 import { usePsChartWidth } from '../../hooks/use-ps-chart-width';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { usePsWidgetFill } from '../../hooks/use-ps-widget-fill';
+import { PsChartAxisService } from '../../services/ps-chart-axis-service';
 import { PsChartScaleService } from '../../services/ps-chart-scale-service';
+import { PsChartTextService } from '../../services/ps-chart-text-service';
 import { PsWaterfallService } from '../../services/ps-waterfall-service';
 import { PsChartBar } from '../ps-chart-bar/ps-chart-bar';
 import { PsChartEmptyState } from '../ps-chart-empty-state/ps-chart-empty-state';
 import { PsChartReadout } from '../ps-chart-readout/ps-chart-readout';
 import { PsChartSkeleton } from '../ps-chart-skeleton/ps-chart-skeleton';
-export const PsWaterfallChart = ({ data, emptyLabel, formatTick, formatValue, height = PsChartConfig.chartHeight, isLoading = false, }) => {
+export const PsWaterfallChart = ({ data, emptyLabel, formatTick, formatValue, height: baseHeight = PsChartConfig.chartHeight, isLoading = false, }) => {
     const theme = usePsMobileTheme();
     const { onLayout, width } = usePsChartWidth();
-    const plot = PsChartScaleService.plot(width, height);
-    const { index, panHandlers } = usePsChartScrub(data.length, true, plot);
+    const height = baseHeight + usePsWidgetFill();
     const steps = PsWaterfallService.steps(data);
+    const domain = PsChartScaleService.domain(PsWaterfallService.values(steps));
+    const tickLabels = PsChartScaleService.ticks(domain).map((tick) => formatTick(tick));
+    const plot = PsChartScaleService.plot(width, height, PsChartAxisService.yAxisWidth(tickLabels, width));
+    const { index, panHandlers } = usePsChartScrub(data.length, true, plot);
     const progress = usePsChartReveal(`waterfall:${PsWaterfallService.values(steps).join(',')}`);
     if (isLoading)
-        return _jsx(PsChartSkeleton, { height: height, variant: PsChartSkeletonVariant.Bars });
+        return _jsx(PsChartSkeleton, { height: baseHeight, variant: PsChartSkeletonVariant.Bars });
     if (steps.length === 0 || PsWaterfallService.values(steps).every((value) => value === 0))
-        return _jsx(PsChartEmptyState, { height: height, label: emptyLabel });
+        return _jsx(PsChartEmptyState, { height: baseHeight, label: emptyLabel });
     const colors = [theme.chart[0], theme.danger, theme.primary700];
-    const domain = PsChartScaleService.domain(PsWaterfallService.values(steps));
+    const xLabels = PsChartAxisService.xLabels(steps.map((entry) => entry.label), plot.right - plot.left, true);
     const selected = index === null ? steps.length - 1 : index;
     const step = steps[selected];
     const rects = PsWaterfallService.rects(steps, colors, domain, plot);
     const color = step.isTotal ? colors[2] : step.value < 0 ? colors[1] : colors[0];
-    return (_jsxs(View, { style: { gap: 8 }, children: [_jsx(PsChartReadout, { items: [{ color, label: step.label, value: formatValue(step.value) }], title: step.label }), _jsx(View, { accessible: true, accessibilityLabel: `${step.label}, ${formatValue(step.value)}`, accessibilityRole: 'image', onLayout: onLayout, style: { height }, children: width === 0 ? null : (_jsxs(_Fragment, { children: [_jsxs(Svg, { height: height, pointerEvents: 'none', width: width, children: [PsChartScaleService.ticks(domain).map((tick) => {
+    return (_jsxs(View, { style: { gap: 8 }, children: [_jsx(PsChartReadout, { items: [{ color, label: step.label, value: formatValue(step.value) }], title: step.label }), _jsx(View, { accessible: true, accessibilityLabel: `${step.label}, ${formatValue(step.value)}`, accessibilityRole: 'image', onLayout: onLayout, style: { height }, children: width === 0 ? null : (_jsxs(_Fragment, { children: [_jsxs(Svg, { height: height, pointerEvents: 'none', width: width, children: [PsChartScaleService.ticks(domain).map((tick, tickIndex) => {
                                     const y = PsChartScaleService.y(tick, domain, plot);
-                                    return (_jsxs(G, { children: [_jsx(Line, { stroke: theme.line, strokeWidth: PsChartConfig.gridLineWidth, x1: plot.left, x2: plot.right, y1: y, y2: y }), _jsx(SvgText, { fill: theme.muted, fontFamily: theme.fonts.medium, fontSize: PsChartConfig.axisLabelSize, textAnchor: 'end', x: plot.left - 6, y: y + 3, children: formatTick(tick) })] }, tick));
-                                }), steps.map((entry, position) => (_jsx(SvgText, { fill: theme.muted, fontFamily: theme.fonts.medium, fontSize: PsChartConfig.axisLabelSize, textAnchor: 'middle', x: PsChartScaleService.categoryX(position, steps.length, plot, true), y: height - 6, children: entry.label }, entry.label))), rects.map((rect) => (_jsx(PsChartBar, { progress: progress, rect: rect }, rect.id)))] }), _jsx(View, { ...panHandlers, style: StyleSheet.absoluteFill, testID: 'ps-chart-touch' })] })) })] }));
+                                    return (_jsxs(G, { children: [_jsx(Line, { stroke: theme.line, strokeWidth: PsChartConfig.gridLineWidth, x1: plot.left, x2: plot.right, y1: y, y2: y }), _jsx(SvgText, { fill: theme.muted, fontFamily: theme.fonts.medium, fontSize: PsChartConfig.axisLabelSize, textAnchor: 'end', x: plot.left - PsChartConfig.axisTickGap, y: y + PsChartConfig.axisLabelSize / 3, children: PsChartTextService.fit(tickLabels[tickIndex], plot.left - PsChartConfig.axisTickGap, PsChartConfig.axisLabelSize) })] }, tick));
+                                }), xLabels.indexes.map((position) => (_jsx(SvgText, { fill: theme.muted, fontFamily: theme.fonts.medium, fontSize: PsChartConfig.axisLabelSize, textAnchor: 'middle', x: PsChartScaleService.categoryX(position, steps.length, plot, true), y: height - 6, children: PsChartTextService.fit(steps[position].label, xLabels.maxWidth, PsChartConfig.axisLabelSize) }, steps[position].label))), rects.map((rect) => (_jsx(PsChartBar, { progress: progress, rect: rect }, rect.id)))] }), _jsx(View, { ...panHandlers, style: StyleSheet.absoluteFill, testID: 'ps-chart-touch' })] })) })] }));
 };

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

@@ -0,0 +1,5 @@
+export declare const PsAccessibilityConfig: {
+    readonly focusEvent: "focus";
+    readonly hiddenImportance: "no-hide-descendants";
+    readonly visibleImportance: "auto";
+};

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

@@ -0,0 +1,5 @@
+export const PsAccessibilityConfig = {
+    focusEvent: 'focus',
+    hiddenImportance: 'no-hide-descendants',
+    visibleImportance: 'auto',
+};

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

@@ -1,31 +1,56 @@
 export declare const PsChartConfig: {
     readonly areaOpacity: 0.18;
-    readonly axisLabelSize: 10;
+    readonly axisLabelGap: 8;
+    readonly axisLabelMaxWidth: 48;
+    readonly axisLabelSize: 11;
+    readonly axisTickGap: 6;
     readonly barGapRatio: 0.3;
     readonly barRadius: 4;
+    readonly charWidthRatio: 0.62;
+    readonly compactBarGapRatio: 0.15;
+    readonly compactSlot: 24;
     readonly cardPadding: 16;
     readonly cardRadius: 16;
     readonly chartHeight: 180;
     readonly deltaIconSize: 10;
     readonly donutHeight: 160;
     readonly donutThickness: 22;
+    readonly donutCenterFontMax: 18;
+    readonly donutCenterFontMin: 11;
+    readonly donutCenterPadding: 8;
+    readonly donutGap: 16;
+    readonly donutMinLegendWidth: 120;
     readonly donutSliceGap: 2;
     readonly drawMs: 700;
+    readonly ellipsis: "…";
     readonly gridLineCount: 3;
     readonly gridLineWidth: 1;
+    readonly kpiDeltaHeight: 20;
     readonly kpiGap: 12;
+    readonly kpiPeriodHeight: 16;
+    readonly kpiValueFontMax: 24;
+    readonly kpiValueFontMin: 16;
+    readonly legendHitSlop: 8;
     readonly legendDot: 8;
     readonly lineWidth: 2.5;
     readonly markerRadius: 4;
+    readonly minBarWidth: 4;
     readonly maxXLabels: 4;
+    readonly minXLabels: 2;
     readonly paddingBottom: 22;
     readonly paddingRight: 8;
     readonly paddingTop: 8;
     readonly readoutHeight: 40;
+    readonly readoutItemGap: 12;
+    readonly readoutLineHeight: 22;
+    readonly readoutRowGap: 2;
+    readonly readoutValueSize: 15;
     readonly scrubLineWidth: 1;
     readonly skeletonBarHeights: readonly [0.45, 0.7, 0.55, 0.85, 0.65, 0.95, 0.75];
     readonly skeletonPulseMs: 900;
     readonly sparklineHeight: 40;
     readonly sparklineWidth: 2;
+    readonly yAxisMaxRatio: 0.35;
+    readonly yAxisMinWidth: 28;
     readonly yAxisWidth: 52;
 };