@pallasoft/ps-mobile-components 1.6.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-list/ps-list-select-row.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsIconKey } from '@pallasoft/ps-icons';
-import { View } from 'react-native';
+import { Pressable, View } from 'react-native';
 import { PsLayoutConfig } from '../../constants/ps-layout-config';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsRippleKind } from '../../constants/ps-ripple-kind';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsNativeMenuService } from '../../services/ps-native-menu-service';
+import { PsRippleService } from '../../services/ps-ripple-service';
 import { PsSelectService } from '../../services/ps-select-service';
 import { PsStateService } from '../../services/ps-state-service';
 import { PsIcon } from '../ps-icon/ps-icon';
@@ -15,14 +17,16 @@ export const PsListSelectRow = ({ isDisabled = false, isLoading = false, onChang
     const theme = usePsMobileTheme();
     if (isLoading)
         return _jsx(PsListRowSkeleton, { subtitle: subtitle, value: value });
-    return (_jsx(PsNativeMenu, { isDisabled: isDisabled, isFullWidth: true, items: PsNativeMenuService.items(options, value), label: title, onSelect: onChange, children: () => (_jsxs(View, { accessibilityRole: 'button', accessibilityValue: { text: PsSelectService.selectedLabel(options, value) }, style: {
+    return (_jsx(PsNativeMenu, { isDisabled: isDisabled, isFullWidth: true, items: PsNativeMenuService.items(options, value), label: title, onSelect: onChange, children: ({ open }) => (_jsxs(Pressable, { accessibilityLabel: title, accessibilityRole: 'button', accessibilityState: { disabled: isDisabled }, accessibilityValue: { text: PsSelectService.selectedLabel(options, value) }, android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), disabled: isDisabled, onPress: open, style: ({ pressed }) => ({
                 alignItems: 'center',
-                backgroundColor: theme.surface,
+                backgroundColor: pressed
+                    ? PsStateService.pressedFill(theme, theme.surface)
+                    : theme.surface,
                 flexDirection: 'row',
                 gap: PsLayoutConfig.headerSlotGap,
                 minHeight: PsLayoutConfig.rowMinHeight,
                 opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
                 paddingHorizontal: PsLayoutConfig.gutter,
                 paddingVertical: PsLayoutConfig.rowPaddingVertical,
-            }, testID: 'ps-list-select-row', children: [_jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: title }), subtitle === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'small', children: subtitle }))] }), valueAccessory, _jsx(PsText, { numberOfLines: 1, style: { maxWidth: PsLayoutConfig.rowValueMaxWidth }, tone: 'muted', children: PsSelectService.selectedLabel(options, value) }), _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Sort, size: PsMobileControlConfig.iconSizeInline })] })) }));
+            }), testID: 'ps-list-select-row', children: [_jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: title }), subtitle === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'small', children: subtitle }))] }), valueAccessory, _jsx(PsText, { numberOfLines: 1, style: { maxWidth: PsLayoutConfig.rowValueMaxWidth }, tone: 'muted', children: PsSelectService.selectedLabel(options, value) }), _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Sort, size: PsMobileControlConfig.iconSizeInline })] })) }));
 };

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

@@ -1,7 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
+import { usePsMaterialScheme } from '../../hooks/use-ps-material-scheme';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMenuPopupStyleService } from '../../services/ps-menu-popup-style-service';
 export const PsMenuPopupDivider = () => {
-    const theme = usePsMobileTheme();
-    return _jsx(View, { style: { backgroundColor: theme.line, height: 1 } });
+    const divider = PsMenuPopupStyleService.divider(usePsMobileTheme(), usePsMaterialScheme(), PsMenuPopupStyleService.isMaterial());
+    return (_jsx(View, { style: {
+            backgroundColor: divider.backgroundColor,
+            height: 1,
+            marginVertical: divider.marginVertical,
+        } }));
 };

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

@@ -3,20 +3,32 @@ import { PsIconKey } from '@pallasoft/ps-icons';
 import { Pressable, View } from 'react-native';
 import { PsMenuPopupConfig } from '../../constants/ps-menu-popup-config';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsRippleKind } from '../../constants/ps-ripple-kind';
+import { usePsMaterialScheme } from '../../hooks/use-ps-material-scheme';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMenuPopupStyleService } from '../../services/ps-menu-popup-style-service';
+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, }) => {
     const theme = usePsMobileTheme();
+    const scheme = usePsMaterialScheme();
+    const isMaterial = PsMenuPopupStyleService.isMaterial();
     const tint = isDanger ? theme.danger : theme.ink;
-    return (_jsxs(Pressable, { accessibilityRole: 'menuitem', accessibilityState: { disabled: isDisabled, selected: isChecked }, disabled: isDisabled, onPress: onPress, style: ({ pressed }) => ({
-            alignItems: 'center',
-            backgroundColor: pressed ? theme.primarySoft : 'transparent',
-            flexDirection: 'row',
-            gap: PsMobileControlConfig.rowSpacing,
-            minHeight: PsMenuPopupConfig.rowHeight,
-            opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
-            paddingHorizontal: PsMenuPopupConfig.rowPaddingHorizontal,
-        }), 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: isChecked ? 'semibold' : 'regular', 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] }));
+    return (_jsxs(Pressable, { accessibilityRole: 'menuitem', accessibilityState: { disabled: isDisabled, selected: isChecked }, android_ripple: PsRippleService.resolve(theme, isDanger ? PsRippleKind.Danger : PsRippleKind.Surface), disabled: isDisabled, onPress: onPress, style: ({ pressed }) => {
+            const row = PsMenuPopupStyleService.row(theme, scheme, isMaterial, isChecked, pressed);
+            return {
+                alignItems: 'center',
+                backgroundColor: row.backgroundColor,
+                borderRadius: row.borderRadius,
+                flexDirection: 'row',
+                gap: PsMobileControlConfig.rowSpacing,
+                marginHorizontal: row.marginHorizontal,
+                minHeight: PsMenuPopupConfig.rowHeight,
+                opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
+                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] }));
 };

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

@@ -1,35 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Modal, Pressable, ScrollView, StyleSheet, View, useWindowDimensions } from 'react-native';
+import { Modal, Pressable, ScrollView, StyleSheet, useWindowDimensions } from 'react-native';
+import Animated from 'react-native-reanimated';
 import { PsMenuPopupConfig } from '../../constants/ps-menu-popup-config';
+import { usePsMaterialScheme } from '../../hooks/use-ps-material-scheme';
+import { usePsMenuPopupReveal } from '../../hooks/use-ps-menu-popup-reveal';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsMenuPopupService } from '../../services/ps-menu-popup-service';
+import { PsMenuPopupStyleService } from '../../services/ps-menu-popup-style-service';
 export const PsMenuPopup = ({ anchor, children, isFullWidth = false, onClose, }) => {
     const theme = usePsMobileTheme();
+    const scheme = usePsMaterialScheme();
     const window = useWindowDimensions();
+    const isMaterial = PsMenuPopupStyleService.isMaterial();
     const [size, setSize] = useState(undefined);
     const layout = size === undefined
         ? undefined
         : PsMenuPopupService.layout(anchor, window, size.height, size.width, isFullWidth);
-    return (_jsxs(Modal, { animationType: 'fade', navigationBarTranslucent: true, onRequestClose: onClose, statusBarTranslucent: true, transparent: true, visible: true, children: [_jsx(Pressable, { accessibilityElementsHidden: true, onPress: onClose, style: StyleSheet.absoluteFill, testID: 'ps-menu-popup-backdrop' }), _jsx(View, { onLayout: (event) => {
+    const container = PsMenuPopupStyleService.container(theme, scheme, isMaterial);
+    const reveal = usePsMenuPopupReveal(layout !== undefined, layout === undefined || layout.isBelow, isMaterial);
+    return (_jsxs(Modal, { animationType: isMaterial ? 'none' : 'fade', navigationBarTranslucent: true, onRequestClose: onClose, statusBarTranslucent: true, transparent: true, visible: true, children: [_jsx(Pressable, { accessibilityElementsHidden: true, onPress: onClose, style: StyleSheet.absoluteFill, testID: 'ps-menu-popup-backdrop' }), _jsx(Animated.View, { onLayout: (event) => {
                     if (size === undefined)
                         setSize({
                             height: event.nativeEvent.layout.height,
                             width: event.nativeEvent.layout.width,
                         });
-                }, pointerEvents: layout === undefined ? 'none' : 'auto', style: {
-                    backgroundColor: theme.surface,
-                    borderColor: theme.line,
-                    borderRadius: PsMenuPopupConfig.radius,
-                    borderWidth: 1,
-                    left: layout === undefined ? 0 : layout.left,
-                    maxHeight: layout === undefined ? undefined : layout.maxHeight,
-                    maxWidth: PsMenuPopupConfig.maxWidth,
-                    minWidth: isFullWidth ? undefined : PsMenuPopupConfig.minWidth,
-                    opacity: layout === undefined ? 0 : 1,
-                    overflow: 'hidden',
-                    position: 'absolute',
-                    top: layout === undefined ? 0 : layout.top,
-                    width: layout === undefined ? undefined : layout.width,
-                }, testID: 'ps-menu-popup', children: _jsx(ScrollView, { bounces: false, contentContainerStyle: { paddingVertical: PsMenuPopupConfig.paddingVertical }, children: children }) })] }));
+                }, pointerEvents: layout === undefined ? 'none' : 'auto', style: [
+                    {
+                        backgroundColor: container.backgroundColor,
+                        borderColor: container.borderColor,
+                        borderRadius: container.borderRadius,
+                        borderWidth: container.borderWidth,
+                        elevation: container.elevation,
+                        left: layout === undefined ? 0 : layout.left,
+                        maxHeight: layout === undefined ? undefined : layout.maxHeight,
+                        maxWidth: PsMenuPopupConfig.maxWidth,
+                        minWidth: isFullWidth ? undefined : PsMenuPopupConfig.minWidth,
+                        overflow: 'hidden',
+                        position: 'absolute',
+                        top: layout === undefined ? 0 : layout.top,
+                        width: layout === undefined ? undefined : layout.width,
+                    },
+                    reveal,
+                ], testID: 'ps-menu-popup', children: _jsx(ScrollView, { bounces: false, contentContainerStyle: { paddingVertical: container.paddingVertical }, children: children }) })] }));
 };

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 }) }) }));
 };