@pallasoft/ps-mobile-components 0.0.0-stage → 1.1.0

package/dist/components/ps-card/ps-card-props.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface PsCardProps {
+    children?: ReactNode;
+    eyebrow?: string;
+    isLoading?: boolean;
+    padding?: 'default' | 'none';
+    style?: StyleProp<ViewStyle>;
+    title?: string;
+    trailing?: ReactNode;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsCardProps } from './ps-card-props';
+export declare const PsCard: ({ children, eyebrow, isLoading, padding, style, title, trailing, }: PsCardProps) => import("react").JSX.Element;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+import { PsText } from '../ps-text/ps-text';
+export const PsCard = ({ children, eyebrow, isLoading = false, padding = 'default', style, title, trailing, }) => {
+    const theme = usePsMobileTheme();
+    const hasHeader = title !== undefined || eyebrow !== undefined || trailing !== undefined;
+    return (_jsx(View, { style: [
+            {
+                backgroundColor: theme.surface,
+                borderColor: theme.line,
+                borderRadius: PsMobileControlConfig.cardRadius,
+                borderWidth: 1,
+                overflow: 'hidden',
+                padding: padding === 'none' ? 0 : PsMobileControlConfig.cardPadding,
+            },
+            style,
+        ], testID: 'ps-card', children: isLoading ? (_jsxs(View, { style: { gap: PsMobileControlConfig.rowSpacing }, testID: 'ps-card-skeleton', children: [_jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: 128 }), _jsx(PsSkeleton, { shape: PsSkeletonShape.Control })] })) : (_jsxs(_Fragment, { children: [hasHeader ? (_jsxs(View, { style: {
+                        alignItems: 'flex-start',
+                        flexDirection: 'row',
+                        gap: PsMobileControlConfig.rowSpacing,
+                        marginBottom: children === undefined ? 0 : PsMobileControlConfig.rowSpacing,
+                    }, children: [_jsxs(View, { style: { flex: 1 }, children: [eyebrow === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'caption', weight: 'semibold', children: eyebrow })), title === undefined ? null : (_jsx(PsText, { accessibilityRole: 'header', weight: 'bold', children: title }))] }), trailing] })) : null, children] })) }));
+};

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

@@ -0,0 +1,6 @@
+export * from './ps-area-chart';
+export * from './ps-bar-chart';
+export * from './ps-cartesian-chart';
+export * from './ps-cartesian-chart-props';
+export * from './ps-line-chart';
+export * from './ps-stacked-bar-chart';

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

@@ -0,0 +1,6 @@
+export * from './ps-area-chart';
+export * from './ps-bar-chart';
+export * from './ps-cartesian-chart';
+export * from './ps-cartesian-chart-props';
+export * from './ps-line-chart';
+export * from './ps-stacked-bar-chart';

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

@@ -0,0 +1,2 @@
+import type { PsAreaChartProps } from './ps-cartesian-chart-props';
+export declare const PsAreaChart: (props: PsAreaChartProps) => import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsCartesianChartKind } from '../../constants/ps-chart-kind';
+import { PsCartesianChart } from './ps-cartesian-chart';
+export const PsAreaChart = (props) => (_jsx(PsCartesianChart, { ...props, kind: PsCartesianChartKind.Area }));

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

@@ -0,0 +1,2 @@
+import type { PsBarChartProps } from './ps-cartesian-chart-props';
+export declare const PsBarChart: (props: PsBarChartProps) => import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsCartesianChartKind } from '../../constants/ps-chart-kind';
+import { PsCartesianChart } from './ps-cartesian-chart';
+export const PsBarChart = (props) => (_jsx(PsCartesianChart, { ...props, kind: PsCartesianChartKind.Bar }));

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

@@ -0,0 +1,18 @@
+import type { PsCartesianChartKind } from '../../constants/ps-chart-kind';
+import type { PsAreaChartDatum } from '../../interfaces/ps-area-chart-datum';
+import type { PsCartesianChartSeries } from '../../interfaces/ps-cartesian-chart-series';
+export interface PsCartesianChartProps {
+    data: PsAreaChartDatum[];
+    emptyLabel: string;
+    formatTick: (value: number) => string;
+    formatValue: (value: number) => string;
+    height?: number;
+    isLoading?: boolean;
+    kind: PsCartesianChartKind;
+    series: PsCartesianChartSeries[];
+    showLegend?: boolean;
+}
+export type PsLineChartProps = Omit<PsCartesianChartProps, 'kind'>;
+export type PsAreaChartProps = Omit<PsCartesianChartProps, 'kind'>;
+export type PsBarChartProps = Omit<PsCartesianChartProps, 'kind'>;
+export type PsStackedBarChartProps = Omit<PsCartesianChartProps, 'kind'>;

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

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

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

@@ -0,0 +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;

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+import Svg, { Circle, G, Line, Text as SvgText } from 'react-native-svg';
+import { PsChartConfig } from '../../constants/ps-chart-config';
+import { PsCartesianChartKind } from '../../constants/ps-chart-kind';
+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 { 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 { 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, }) => {
+    const theme = usePsMobileTheme();
+    const { onLayout, width } = usePsChartWidth();
+    const isBars = PsChartKindService.isBars(kind);
+    const isStacked = kind === PsCartesianChartKind.StackedBar;
+    const plot = PsChartScaleService.plot(width, height);
+    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) });
+    if (data.length === 0 || PsChartSeriesService.isEmpty(data, series))
+        return _jsx(PsChartEmptyState, { height: height, label: emptyLabel });
+    const colors = series.map((entry, position) => PsChartSeriesService.color({
+        count: series.length,
+        explicit: entry.color,
+        index: position,
+        theme,
+    }));
+    const domain = PsChartScaleService.domain(isStacked
+        ? PsChartSeriesService.stackedValues(data, series)
+        : PsChartSeriesService.values(data, series));
+    const selected = index === null ? data.length - 1 : index;
+    const datum = data[selected];
+    const items = PsChartReadoutService.items(datum, series, colors, formatValue);
+    const xAt = (position) => PsChartScaleService.categoryX(position, data.length, plot, isBars);
+    const rects = isBars
+        ? isStacked
+            ? PsChartBarService.stacked(data, series, colors, domain, plot)
+            : PsChartBarService.grouped(data, series, colors, 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) => {
+                                    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))), isBars
+                                    ? null
+                                    : series.map((entry, position) => {
+                                        const points = data.map((row, rowIndex) => ({
+                                            x: xAt(rowIndex),
+                                            y: PsChartScaleService.y(PsChartSeriesService.value(row, entry.dataKey), domain, plot),
+                                        }));
+                                        return (_jsx(PsChartLine, { areaBaseline: kind === PsCartesianChartKind.Area
+                                                ? PsChartScaleService.y(0, domain, plot)
+                                                : undefined, color: colors[position], points: points, progress: progress }, entry.dataKey));
+                                    }), index === null ? null : (_jsx(Line, { stroke: theme.muted, strokeWidth: PsChartConfig.scrubLineWidth, x1: xAt(selected), x2: xAt(selected), y1: plot.top, y2: plot.bottom })), isBars
+                                    ? null
+                                    : series.map((entry, position) => (_jsx(Circle, { cx: xAt(selected), cy: PsChartScaleService.y(PsChartSeriesService.value(datum, entry.dataKey), domain, plot), fill: theme.surface, r: PsChartConfig.markerRadius, stroke: colors[position], strokeWidth: 2 }, entry.dataKey)))] }), _jsx(View, { ...panHandlers, style: StyleSheet.absoluteFill, testID: 'ps-chart-touch' })] })) }), showLegend && series.length > 1 ? (_jsx(PsChartLegend, { items: series.map((entry, position) => ({
+                    color: colors[position],
+                    label: entry.label,
+                })) })) : null] }));
+};

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

@@ -0,0 +1,2 @@
+import type { PsLineChartProps } from './ps-cartesian-chart-props';
+export declare const PsLineChart: (props: PsLineChartProps) => import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsCartesianChartKind } from '../../constants/ps-chart-kind';
+import { PsCartesianChart } from './ps-cartesian-chart';
+export const PsLineChart = (props) => (_jsx(PsCartesianChart, { ...props, kind: PsCartesianChartKind.Line }));

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

@@ -0,0 +1,2 @@
+import type { PsStackedBarChartProps } from './ps-cartesian-chart-props';
+export declare const PsStackedBarChart: (props: PsStackedBarChartProps) => import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsCartesianChartKind } from '../../constants/ps-chart-kind';
+import { PsCartesianChart } from './ps-cartesian-chart';
+export const PsStackedBarChart = (props) => (_jsx(PsCartesianChart, { ...props, kind: PsCartesianChartKind.StackedBar }));

package/dist/components/ps-chart-bar/index.d.ts

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

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

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

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

@@ -0,0 +1,6 @@
+import type { SharedValue } from 'react-native-reanimated';
+import type { PsChartBarRect } from '../../interfaces/ps-chart-bar-rect';
+export interface PsChartBarProps {
+    progress: SharedValue<number>;
+    rect: PsChartBarRect;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsChartBarProps } from './ps-chart-bar-props';
+export declare const PsChartBar: ({ progress, rect }: PsChartBarProps) => import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import { Rect } from 'react-native-svg';
+import { PsChartConfig } from '../../constants/ps-chart-config';
+const AnimatedRect = Animated.createAnimatedComponent(Rect);
+export const PsChartBar = ({ progress, rect }) => {
+    const animatedProps = useAnimatedProps(() => ({
+        height: rect.height * progress.value,
+        y: rect.isNegative ? rect.y : rect.y + rect.height * (1 - progress.value),
+    }));
+    return (_jsx(AnimatedRect, { animatedProps: animatedProps, fill: rect.color, height: rect.height, rx: Math.min(PsChartConfig.barRadius, rect.width / 2), width: rect.width, x: rect.x, y: rect.y }));
+};

package/dist/components/ps-chart-delta-badge/index.d.ts

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

package/dist/components/ps-chart-delta-badge/index.js

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

package/dist/components/ps-chart-delta-badge/ps-chart-delta-badge-props.d.ts

@@ -0,0 +1,6 @@
+import type { PsChartDeltaDirection, PsChartDeltaTone } from '../../constants/ps-chart-delta';
+export interface PsChartDeltaBadgeProps {
+    direction?: PsChartDeltaDirection;
+    label: string;
+    tone?: PsChartDeltaTone;
+}

package/dist/components/ps-chart-delta-badge/ps-chart-delta-badge-props.js

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

package/dist/components/ps-chart-delta-badge/ps-chart-delta-badge.d.ts

@@ -0,0 +1,2 @@
+import type { PsChartDeltaBadgeProps } from './ps-chart-delta-badge-props';
+export declare const PsChartDeltaBadge: ({ direction, label, tone, }: PsChartDeltaBadgeProps) => import("react").JSX.Element;

package/dist/components/ps-chart-delta-badge/ps-chart-delta-badge.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { PsChartConfig } from '../../constants/ps-chart-config';
+import { PsChartDeltaArrowPaths, PsChartDeltaDirection, PsChartDeltaTone, PsChartDeltaViewBox, } from '../../constants/ps-chart-delta';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsChartDeltaService } from '../../services/ps-chart-delta-service';
+import { PsText } from '../ps-text/ps-text';
+export const PsChartDeltaBadge = ({ direction = PsChartDeltaDirection.Up, label, tone = PsChartDeltaTone.Neutral, }) => {
+    const theme = usePsMobileTheme();
+    const colors = PsChartDeltaService.colors(tone, theme);
+    return (_jsxs(View, { style: {
+            alignItems: 'center',
+            alignSelf: 'flex-start',
+            backgroundColor: colors.background,
+            borderRadius: 999,
+            flexDirection: 'row',
+            gap: 4,
+            paddingHorizontal: 8,
+            paddingVertical: 2,
+        }, testID: 'ps-chart-delta-badge', children: [_jsx(Svg, { height: PsChartConfig.deltaIconSize, viewBox: `0 0 ${PsChartDeltaViewBox} ${PsChartDeltaViewBox}`, width: PsChartConfig.deltaIconSize, children: _jsx(Path, { d: PsChartDeltaArrowPaths[direction], fill: 'none', stroke: colors.foreground, strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 1.6 }) }), _jsx(PsText, { style: { color: colors.foreground }, variant: 'caption', weight: 'bold', children: label })] }));
+};

package/dist/components/ps-chart-empty-state/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ps-chart-empty-state';
+export * from './ps-chart-empty-state-props';

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

@@ -0,0 +1,2 @@
+export * from './ps-chart-empty-state';
+export * from './ps-chart-empty-state-props';

package/dist/components/ps-chart-empty-state/ps-chart-empty-state-props.d.ts

@@ -0,0 +1,4 @@
+export interface PsChartEmptyStateProps {
+    height?: number;
+    label: string;
+}

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

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

package/dist/components/ps-chart-empty-state/ps-chart-empty-state.d.ts

@@ -0,0 +1,2 @@
+import type { PsChartEmptyStateProps } from './ps-chart-empty-state-props';
+export declare const PsChartEmptyState: ({ height, label, }: PsChartEmptyStateProps) => import("react").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsChartConfig } from '../../constants/ps-chart-config';
+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 }) }));

package/dist/components/ps-chart-frame/index.d.ts

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

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

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

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { PsChartDeltaBadgeProps } from '../ps-chart-delta-badge/ps-chart-delta-badge-props';
+export interface PsChartFrameProps {
+    children?: ReactNode;
+    delta?: PsChartDeltaBadgeProps;
+    period?: string;
+    title?: string;
+    value?: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsChartFrameProps } from './ps-chart-frame-props';
+export declare const PsChartFrame: ({ children, delta, period, title, value }: PsChartFrameProps) => import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+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] }) }));

package/dist/components/ps-chart-legend/index.d.ts

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

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

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

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

@@ -0,0 +1,6 @@
+import type { PsChartLegendItem } from '../../interfaces/ps-chart-legend-item';
+export interface PsChartLegendProps {
+    activeIndex?: number | null;
+    items: PsChartLegendItem[];
+    onPressItem?: (index: number) => void;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { PsChartLegendProps } from './ps-chart-legend-props';
+export declare const PsChartLegend: ({ activeIndex, items, onPressItem }: PsChartLegendProps) => import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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: {
+                alignItems: 'center',
+                flexDirection: 'row',
+                gap: 8,
+                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))) }));
+};

package/dist/components/ps-chart-line/index.d.ts

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

package/dist/components/ps-chart-line/index.js

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

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

@@ -0,0 +1,9 @@
+import type { SharedValue } from 'react-native-reanimated';
+import type { PsChartPoint } from '../../interfaces/ps-chart-point';
+export interface PsChartLineProps {
+    areaBaseline?: number;
+    color: string;
+    points: PsChartPoint[];
+    progress: SharedValue<number>;
+    strokeWidth?: number;
+}

package/dist/components/ps-chart-line/ps-chart-line-props.js

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

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

@@ -0,0 +1,2 @@
+import type { PsChartLineProps } from './ps-chart-line-props';
+export declare const PsChartLine: ({ areaBaseline, color, points, progress, strokeWidth, }: PsChartLineProps) => import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import { Path } from 'react-native-svg';
+import { PsChartConfig } from '../../constants/ps-chart-config';
+import { PsChartPathService } from '../../services/ps-chart-path-service';
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+export const PsChartLine = ({ areaBaseline, color, points, progress, strokeWidth = PsChartConfig.lineWidth, }) => {
+    const length = PsChartPathService.measure(points);
+    const lineProps = useAnimatedProps(() => ({ strokeDashoffset: length * (1 - progress.value) }));
+    const areaProps = useAnimatedProps(() => ({
+        fillOpacity: PsChartConfig.areaOpacity * progress.value,
+    }));
+    return (_jsxs(_Fragment, { children: [areaBaseline === undefined ? null : (_jsx(AnimatedPath, { animatedProps: areaProps, d: PsChartPathService.area(points, areaBaseline), fill: color })), _jsx(AnimatedPath, { animatedProps: lineProps, d: PsChartPathService.line(points), fill: 'none', stroke: color, strokeDasharray: [length, length], strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: strokeWidth })] }));
+};

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsChartConfig } from '../../constants/ps-chart-config';
+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: {
+                                backgroundColor: item.color,
+                                borderRadius: PsChartConfig.legendDot,
+                                height: PsChartConfig.legendDot,
+                                width: PsChartConfig.legendDot,
+                            } }), _jsx(PsText, { variant: 'numeric', weight: 'bold', children: item.value })] }, item.label))) })] }));
+};

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

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

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

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

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

@@ -0,0 +1,6 @@
+import type { PsChartSkeletonVariant } from '../../constants/ps-chart-skeleton-variant';
+export interface PsChartSkeletonProps {
+    height?: number;
+    label?: string;
+    variant?: PsChartSkeletonVariant;
+}

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

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

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

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

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

@@ -0,0 +1,6 @@
+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 { 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 }) }));

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

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

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

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

package/dist/components/ps-checkbox/ps-checkbox-props.d.ts

@@ -0,0 +1,7 @@
+export interface PsCheckboxProps {
+    description?: string;
+    isChecked: boolean;
+    isDisabled?: boolean;
+    label: string;
+    onChange?: (isChecked: boolean) => void;
+}

package/dist/components/ps-checkbox/ps-checkbox-props.js

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

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

@@ -0,0 +1,2 @@
+import type { PsCheckboxProps } from './ps-checkbox-props';
+export declare const PsCheckbox: ({ description, isChecked, isDisabled, label, onChange, }: PsCheckboxProps) => import("react").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { Pressable, View } from 'react-native';
+import { PsCheckboxConfig } from '../../constants/ps-checkbox-config';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsIcon } from '../ps-icon/ps-icon';
+import { PsText } from '../ps-text/ps-text';
+export const PsCheckbox = ({ description, isChecked, isDisabled = false, label, onChange, }) => {
+    const theme = usePsMobileTheme();
+    return (_jsxs(Pressable, { accessibilityRole: 'checkbox', accessibilityState: { checked: isChecked, disabled: isDisabled }, disabled: isDisabled, onPress: () => onChange?.(!isChecked), style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: PsMobileControlConfig.rowSpacing,
+            opacity: isDisabled ? PsMobileControlConfig.disabledOpacity : 1,
+        }, children: [_jsx(View, { style: {
+                    alignItems: 'center',
+                    backgroundColor: isChecked ? theme.primary : theme.surface,
+                    borderColor: isChecked ? theme.primary : theme.line,
+                    borderRadius: PsCheckboxConfig.radius,
+                    borderWidth: 1,
+                    height: PsCheckboxConfig.size,
+                    justifyContent: 'center',
+                    width: PsCheckboxConfig.size,
+                }, testID: 'ps-checkbox-box', children: isChecked ? (_jsx(PsIcon, { color: theme.primaryContrast, iconKey: PsIconKey.Check, size: PsCheckboxConfig.iconSize })) : null }), _jsxs(View, { style: { flex: 1 }, children: [_jsx(PsText, { weight: 'semibold', children: label }), description === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'caption', children: description }))] })] }));
+};

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

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

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

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

package/dist/components/ps-chip/ps-chip-props.d.ts

@@ -0,0 +1,7 @@
+import type { PsIconKey } from '@pallasoft/ps-icons';
+export interface PsChipProps {
+    children: string;
+    isSelected?: boolean;
+    onPress: () => void;
+    trailingIcon?: PsIconKey;
+}

package/dist/components/ps-chip/ps-chip-props.js

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

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

@@ -0,0 +1,2 @@
+import type { PsChipProps } from './ps-chip-props';
+export declare const PsChip: ({ children, isSelected, onPress, trailingIcon }: PsChipProps) => import("react").JSX.Element;