@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/DateRangePicker/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { DateRangePicker, default } from "./DateRangePicker.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/Descriptions/Descriptions.js

@@ -0,0 +1,101 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { fontFor, useTheme } from "../../theme/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** A missing fact should read as "no value", never as a broken row. */
+const EM_DASH = '—';
+const isEmptyValue = value => value === null || value === undefined || value === '' || Array.isArray(value) && !value.length;
+
+/**
+ * A labelled key-value list for record detail — the "what are this thing's
+ * fields" view that every detail screen needs and that ListItem (a tappable row
+ * with a title) is the wrong shape for.
+ */
+export const Descriptions = ({
+  items,
+  columns = 1,
+  size = 'md',
+  bordered = false,
+  title,
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const labelSize = size === 'sm' ? theme.typography.fontSize.xs : theme.typography.fontSize.sm;
+  const valueSize = size === 'sm' ? theme.typography.fontSize.sm : theme.typography.fontSize.base;
+  const rowGap = size === 'sm' ? theme.spacing.xs : theme.spacing.sm;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      gap: rowGap
+    }, style],
+    testID: testID,
+    children: [title ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.title, {
+        fontSize: theme.typography.fontSize.lg,
+        color: theme.colors.text.primary
+      }],
+      children: title
+    }) : null, items.map((item, index) => {
+      const empty = isEmptyValue(item.value);
+      const sideBySide = columns === 2 && !item.full;
+      return /*#__PURE__*/_jsxs(View, {
+        style: [sideBySide ? styles.rowSide : styles.rowStack, {
+          paddingVertical: rowGap
+        }, bordered && index > 0 ? styles.bordered : null, bordered && index > 0 ? {
+          borderTopColor: theme.colors.border.secondary
+        } : null],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.label, {
+            fontSize: labelSize,
+            color: theme.colors.text.tertiary
+          }, sideBySide ? styles.labelSide : null],
+          children: item.label
+        }), typeof item.value === 'string' || empty ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.value, {
+            fontSize: valueSize,
+            color: empty ? theme.colors.text.tertiary : theme.colors.text.primary
+          }, sideBySide ? styles.valueSide : null],
+          children: empty ? EM_DASH : item.value
+        }) : /*#__PURE__*/_jsx(View, {
+          style: sideBySide ? styles.valueSide : null,
+          children: item.value
+        })]
+      }, item.key ?? `${item.label}-${index}`);
+    })]
+  });
+};
+const buildStyles = theme => StyleSheet.create({
+  title: {
+    ...fontFor(theme, 'semibold'),
+    fontWeight: '600'
+  },
+  rowStack: {
+    gap: 2
+  },
+  rowSide: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: theme.spacing.md
+  },
+  bordered: {
+    borderTopWidth: StyleSheet.hairlineWidth
+  },
+  label: {
+    ...fontFor(theme, 'semibold'),
+    fontWeight: '600'
+  },
+  labelSide: {
+    flex: 4
+  },
+  value: {
+    ...fontFor(theme, 'normal')
+  },
+  valueSide: {
+    flex: 6
+  }
+});
+export default Descriptions;
+//# sourceMappingURL=Descriptions.js.map

package/lib/module/components/Descriptions/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Descriptions, default } from "./Descriptions.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/Dialog/Dialog.js

@@ -0,0 +1,240 @@
+"use strict";
+
+import React, { useCallback, useMemo } from 'react';
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
+import { fontFor, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
+import { MODAL_DISMISS_GRACE_MS, Modal } from "../Modal/Modal.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Dialog = props => {
+  const {
+    visible,
+    onClose,
+    title,
+    message,
+    icon,
+    variant = 'default',
+    actions,
+    dismissOnAction = true,
+    accessibilityLabel,
+    contentStyle,
+    containerStyle,
+    titleStyle,
+    messageStyle,
+    iconWrapperStyle,
+    actionsRowStyle,
+    actionButtonStyle,
+    actionTextStyle,
+    haptic,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const variantTint = useMemo(() => tintForVariant(theme, variant), [theme, variant]);
+  const dialogTokens = theme.components.dialog;
+  const iconWrapperSize = dialogTokens?.iconWrapperSize ?? 48;
+  const iconWrapperBorderRadius = dialogTokens?.iconWrapperBorderRadius ?? 24;
+  const actionButtonMinHeight = dialogTokens?.actionButtonMinHeight ?? 44;
+  const handleAction = useCallback(action => {
+    if (action.loading) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    if (dismissOnAction) {
+      // Close first, run the action after the native modal has dismissed.
+      // Running it in the same commit can unmount this tree while Android's
+      // ReactModalHostView is mid-dismiss (NPE crash). The timeout is
+      // deliberately not cleared on unmount — the action (e.g. logout)
+      // must still run even though the dialog is gone.
+      onClose();
+      setTimeout(action.onPress, MODAL_DISMISS_GRACE_MS);
+    } else {
+      action.onPress();
+    }
+  }, [dismissOnAction, onClose, haptic]);
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    onRequestClose: onClose
+    // Without this the backdrop tap resolves Modal's OWN (undefined) haptic
+    // to 'selection', so haptic={false} on the Dialog was ignored.
+    ,
+    haptic: haptic,
+    presentation: "centered",
+    accessibilityLabel: accessibilityLabel ?? title,
+    contentStyle: contentStyle,
+    testID: testID,
+    children: /*#__PURE__*/_jsxs(View, {
+      accessibilityRole: "alert",
+      accessibilityLabel: accessibilityLabel ?? title,
+      style: [styles.container, containerStyle],
+      children: [icon ? /*#__PURE__*/_jsx(View, {
+        style: [styles.iconWrapper, {
+          width: iconWrapperSize,
+          height: iconWrapperSize,
+          borderRadius: iconWrapperBorderRadius,
+          backgroundColor: variantTint.muted,
+          marginBottom: theme.spacing.md
+        }, iconWrapperStyle],
+        children: icon
+      }) : null, title ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.title, {
+          color: theme.colors.text.primary,
+          fontSize: theme.typography.fontSize.xl,
+          ...fontFor(theme, 'semibold'),
+          marginBottom: message ? theme.spacing.sm : theme.spacing.md
+        }, titleStyle],
+        accessibilityRole: "header",
+        children: title
+      }) : null, typeof message === 'string' ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.message, {
+          color: theme.colors.text.secondary,
+          fontSize: theme.typography.fontSize.base,
+          lineHeight: theme.typography.fontSize.base * theme.typography.lineHeight.normal,
+          marginBottom: actions && actions.length > 0 ? theme.spacing.lg : 0
+        }, messageStyle],
+        children: message
+      }) : message ? /*#__PURE__*/_jsx(View, {
+        style: {
+          marginBottom: actions && actions.length > 0 ? theme.spacing.lg : 0
+        },
+        children: message
+      }) : null, actions && actions.length > 0 ? /*#__PURE__*/_jsx(View, {
+        style: [styles.actionsRow, actionsRowStyle],
+        children: actions.map((action, index) => {
+          const tone = action.tone ?? 'primary';
+          const buttonStyle = actionStyleFor(theme, tone, variant);
+          const isLast = index === actions.length - 1;
+          return /*#__PURE__*/_jsx(Pressable, {
+            onPress: () => handleAction(action),
+            disabled: action.loading,
+            accessibilityRole: "button",
+            accessibilityLabel: action.label,
+            accessibilityState: {
+              busy: action.loading,
+              disabled: action.loading
+            },
+            style: ({
+              pressed
+            }) => [styles.actionButton, {
+              minHeight: actionButtonMinHeight,
+              backgroundColor: buttonStyle.backgroundColor,
+              borderColor: buttonStyle.borderColor,
+              borderWidth: buttonStyle.borderWidth,
+              borderRadius: theme.radius.md,
+              paddingVertical: theme.spacing.md - 2,
+              paddingHorizontal: theme.spacing.lg,
+              marginRight: isLast ? 0 : theme.spacing.sm,
+              opacity: action.loading ? 0.7 : pressed ? 0.85 : 1
+            }, actionButtonStyle],
+            children: action.loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+              size: "small",
+              color: buttonStyle.textColor
+            }) : /*#__PURE__*/_jsx(Text, {
+              style: [{
+                color: buttonStyle.textColor,
+                fontSize: theme.typography.fontSize.base,
+                ...fontFor(theme, 'semibold'),
+                textAlign: 'center'
+              }, actionTextStyle],
+              numberOfLines: 1,
+              children: action.label
+            })
+          }, `${action.label}-${index}`);
+        })
+      }) : null]
+    })
+  });
+};
+Dialog.displayName = 'Dialog';
+const tintForVariant = (theme, variant) => {
+  switch (variant) {
+    case 'success':
+      return {
+        base: theme.colors.success,
+        muted: theme.colors.background.secondary
+      };
+    case 'warning':
+      return {
+        base: theme.colors.warning,
+        muted: theme.colors.background.secondary
+      };
+    case 'error':
+      return {
+        base: theme.colors.error,
+        muted: theme.colors.background.secondary
+      };
+    case 'info':
+      return {
+        base: theme.colors.info,
+        muted: theme.colors.background.secondary
+      };
+    case 'default':
+    default:
+      return {
+        base: theme.colors.primary,
+        muted: theme.colors.primaryMuted
+      };
+  }
+};
+const actionStyleFor = (theme, tone, variant) => {
+  const variantBase = tintForVariant(theme, variant).base;
+  switch (tone) {
+    case 'primary':
+      {
+        const bg = variant === 'default' ? theme.colors.primary : variantBase;
+        return {
+          backgroundColor: bg,
+          borderColor: 'transparent',
+          borderWidth: 0,
+          textColor: theme.colors.text.inverse
+        };
+      }
+    case 'error':
+      return {
+        backgroundColor: theme.colors.error,
+        borderColor: 'transparent',
+        borderWidth: 0,
+        textColor: theme.colors.text.inverse
+      };
+    case 'neutral':
+    default:
+      return {
+        backgroundColor: 'transparent',
+        borderColor: theme.colors.border.primary,
+        borderWidth: 1,
+        textColor: theme.colors.text.primary
+      };
+  }
+};
+const buildStyles = _theme => StyleSheet.create({
+  container: {
+    alignItems: 'stretch'
+  },
+  iconWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center'
+  },
+  title: {
+    textAlign: 'center'
+  },
+  message: {
+    textAlign: 'center'
+  },
+  actionsRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center'
+  },
+  actionButton: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export { Dialog };
+export default Dialog;
+//# sourceMappingURL=Dialog.js.map

package/lib/module/components/Dialog/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Dialog, default } from "./Dialog.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/Divider/Divider.js

@@ -0,0 +1,114 @@
+"use strict";
+
+import { forwardRef, useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const spacingFor = (theme, spacing) => {
+  switch (spacing) {
+    case 'sm':
+      return theme.spacing.sm;
+    case 'md':
+      return theme.spacing.md;
+    case 'lg':
+      return theme.spacing.lg;
+    case 'none':
+    default:
+      return 0;
+  }
+};
+const Divider = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    orientation = 'horizontal',
+    thickness = 1,
+    color,
+    spacing = 'none',
+    inset = 0,
+    label,
+    labelPosition = 'center',
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const lineColor = color ?? theme.colors.border.primary;
+  const margin = spacingFor(theme, spacing);
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  if (orientation === 'vertical') {
+    return /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      accessibilityRole: "none",
+      testID: testID,
+      style: [styles.vertical, {
+        width: thickness,
+        backgroundColor: lineColor,
+        marginHorizontal: margin,
+        marginTop: inset
+      }, style]
+    });
+  }
+  if (label) {
+    const startFlex = labelPosition === 'start' ? 0 : labelPosition === 'end' ? 1 : 1;
+    const endFlex = labelPosition === 'end' ? 0 : labelPosition === 'start' ? 1 : 1;
+    return /*#__PURE__*/_jsxs(View, {
+      ref: ref,
+      accessibilityRole: "none",
+      testID: testID,
+      style: [styles.horizontalRow, {
+        marginVertical: margin,
+        marginLeft: inset
+      }, style],
+      children: [startFlex > 0 ? /*#__PURE__*/_jsx(View, {
+        style: [styles.horizontalLine, {
+          height: thickness,
+          backgroundColor: lineColor,
+          flex: startFlex
+        }]
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        style: styles.label,
+        numberOfLines: 1,
+        children: label
+      }), endFlex > 0 ? /*#__PURE__*/_jsx(View, {
+        style: [styles.horizontalLine, {
+          height: thickness,
+          backgroundColor: lineColor,
+          flex: endFlex
+        }]
+      }) : null]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    accessibilityRole: "none",
+    testID: testID,
+    style: [styles.horizontalLine, {
+      height: thickness,
+      backgroundColor: lineColor,
+      marginVertical: margin,
+      marginLeft: inset
+    }, style]
+  });
+});
+Divider.displayName = 'Divider';
+const buildStyles = theme => StyleSheet.create({
+  horizontalRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%'
+  },
+  horizontalLine: {
+    width: '100%',
+    alignSelf: 'stretch'
+  },
+  vertical: {
+    alignSelf: 'stretch'
+  },
+  label: {
+    marginHorizontal: theme.spacing.sm,
+    color: theme.colors.text.tertiary,
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.medium
+  }
+});
+export { Divider };
+export default Divider;
+//# sourceMappingURL=Divider.js.map

package/lib/module/components/Divider/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Divider, default } from "./Divider.js";
+//# sourceMappingURL=index.js.map