@webority/mobile-ui 0.0.0-stage → 0.0.34

package/lib/module/components/PickerTrigger/PickerTrigger.js

@@ -0,0 +1,146 @@
+"use strict";
+
+/**
+ * PickerTrigger — the tappable input field that opens a modal picker.
+ *
+ * Standalone read-only field built on FieldBase, used by DatePicker,
+ * TimePicker and DateRangePicker (and any consumer-built picker) to render
+ * the closed-state row that matches Input / Select pixel-for-pixel.
+ *
+ * The component is purely visual + interactive — it does not own picker
+ * state. Consumers either:
+ *   - Use the built-in trigger mode on a picker, which composes this
+ *     internally and manages its own open/close.
+ *   - Render PickerTrigger themselves alongside a controlled picker.
+ */
+
+import React, { forwardRef, useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { FieldBase, FieldLabel, FieldMessage, RequiredMark, resolveFieldSize, resolveFieldTextStyle } from "../FieldBase/index.js";
+import { Chevron } from "../FieldBase/Chevron.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PickerTrigger = /*#__PURE__*/forwardRef((props, _ref) => {
+  const {
+    value,
+    placeholder,
+    label,
+    helperText,
+    error,
+    required = false,
+    onPress,
+    clearable = false,
+    onClear,
+    leadingIcon,
+    trailing,
+    disabled = false,
+    size = 'md',
+    variant,
+    style,
+    triggerStyle,
+    valueStyle,
+    labelStyle,
+    messageStyle,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const sizeTokens = resolveFieldSize(theme, size);
+  const fieldText = resolveFieldTextStyle(theme, {
+    disabled
+  });
+  const hasValue = typeof value === 'string' && value.length > 0;
+  const hasError = typeof error === 'string' && error.length > 0;
+  const displayText = hasValue ? value : placeholder ?? 'Select…';
+  const valueColor = hasValue ? fieldText.color : fieldText.placeholderColor;
+  const a11ySummary = hasValue ? `${label ?? 'Selection'}: ${value}` : placeholder ?? 'No selection';
+  const a11yLabel = accessibilityLabel ?? a11ySummary;
+  const a11yState = {
+    disabled
+  };
+  const handleClear = () => {
+    if (disabled) {
+      return;
+    }
+    onClear?.();
+  };
+  const showChevron = trailing === undefined;
+  const showClear = clearable && hasValue && !disabled;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.root, style],
+    testID: testID,
+    children: [label ? /*#__PURE__*/_jsx(FieldLabel, {
+      size: size,
+      required: required,
+      style: labelStyle,
+      children: label
+    }) : null, /*#__PURE__*/_jsx(FieldBase, {
+      size: size,
+      variant: variant,
+      disabled: disabled,
+      error: hasError,
+      filled: hasValue,
+      onPress: onPress,
+      leading: leadingIcon,
+      trailing: showClear || showChevron || trailing !== null ? /*#__PURE__*/_jsxs(View, {
+        style: styles.trailingRow,
+        children: [showClear ? /*#__PURE__*/_jsx(Text, {
+          onPress: handleClear,
+          accessibilityRole: "button",
+          accessibilityLabel: "Clear",
+          style: {
+            fontSize: sizeTokens.iconSize,
+            color: theme.colors.text.secondary,
+            paddingHorizontal: 4
+          },
+          children: "\xD7"
+        }) : null, trailing !== undefined ? trailing : showChevron ? /*#__PURE__*/_jsx(Chevron, {
+          size: sizeTokens.iconSize,
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.tertiary
+        }) : null]
+      }) : null,
+      accessibilityLabel: a11yLabel,
+      accessibilityState: a11yState,
+      accessibilityRole: "button",
+      style: triggerStyle,
+      children: /*#__PURE__*/_jsxs(Text, {
+        numberOfLines: 1,
+        style: [styles.valueText, {
+          color: valueColor,
+          fontSize: sizeTokens.fontSize,
+          ...fieldText.weightStyle
+        }, valueStyle],
+        children: [displayText, !hasValue && required && !label ? /*#__PURE__*/_jsx(RequiredMark, {}) : null]
+      })
+    }), /*#__PURE__*/_jsx(FieldMessage, {
+      size: size,
+      error: hasError,
+      text: hasError ? error : helperText,
+      style: messageStyle
+    })]
+  });
+});
+PickerTrigger.displayName = 'PickerTrigger';
+const buildStyles = _theme => StyleSheet.create({
+  root: {
+    width: '100%'
+  },
+  label: {
+    includeFontPadding: false
+  },
+  valueText: {
+    flex: 1,
+    includeFontPadding: false
+  },
+  message: {
+    includeFontPadding: false
+  },
+  trailingRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});
+export { PickerTrigger };
+export default PickerTrigger;
+//# sourceMappingURL=PickerTrigger.js.map

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

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

package/lib/module/components/ProfileCompletion/ProfileCompletion.js

@@ -0,0 +1,211 @@
+"use strict";
+
+/**
+ * ProfileCompletion: the profile header that shows how complete a profile
+ * is. The avatar sits inside a ProgressRing on the left; title, subtitle
+ * and description stack on the right, with an optional trailing slot (an
+ * Edit link). The form itself stays in the app: pass `progress` as a
+ * percentage, usually `useFormCompletion(form.values, fields).percent`, and
+ * the ring sweeps to it.
+ *
+ * No card and no radius of its own: the app wraps it in a Card when the
+ * design wants one.
+ */
+
+import { forwardRef, useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { fontFor, useTheme } from "../../theme/index.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { AppIcon } from "../AppIcon/index.js";
+import { Avatar } from "../Avatar/index.js";
+import { ProgressRing } from "../ProgressRing/index.js";
+
+/** The Avatar's own tone set; kept under this name for the component's public surface. */
+
+/**
+ * How the ring is coloured. `'banded'` changes colour by thirds of progress
+ * (red, amber, green); `'single'` keeps one colour at every progress.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_AVATAR_SIZE = 56;
+const DEFAULT_RING_WIDTH = 3;
+const DEFAULT_RING_GAP = 1;
+const ProfileCompletion = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    progress,
+    title,
+    subtitle,
+    description,
+    source,
+    ImageComponent,
+    size = DEFAULT_AVATAR_SIZE,
+    avatarTone = 'neutral',
+    avatarBackgroundColor,
+    avatarColor,
+    ringWidth: ringWidthProp,
+    ringGap = DEFAULT_RING_GAP,
+    ringVariant = 'banded',
+    tone,
+    ringColor,
+    animated = true,
+    showCompleteBadge = true,
+    trailing,
+    accessibilityLabel,
+    style,
+    titleStyle,
+    subtitleStyle,
+    descriptionStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const ringWidth = ringWidthProp ?? theme.components.progressRing?.strokeWidth ?? DEFAULT_RING_WIDTH;
+  // A hair of air between picture and ring, so the ring reads as a ring,
+  // not a border. The ring's own stroke sits outside that gap.
+  const ringSize = size + (ringGap + ringWidth) * 2;
+  // `progress` is a percentage; the ring takes the same share as a fraction.
+  const clampedPercent = Math.min(100, Math.max(0, Number.isNaN(progress) ? 0 : progress));
+  const percent = Math.round(clampedPercent);
+  const a11yLabel = accessibilityLabel ?? `${title}, profile ${percent}% complete`;
+  const idBase = testID ?? 'profile-completion';
+
+  // The tick badge is the verified seal (the Avatar's own: a star-edged
+  // badge with the tick cut out) on the ring at its bottom-right diagonal (45
+  // degrees), centred on the stroke. A disc of the card colour behind it cuts
+  // the seal out of the ring and shows through the tick. It takes the colour
+  // the ring reaches at 100%.
+  // Only a truly full profile: 99.6 reads as 100% but gets no tick.
+  const complete = showCompleteBadge && clampedPercent >= 100;
+  const badgeSize = Math.max(16, Math.round(ringSize * 0.3));
+  const badgeCentre = ringSize / 2 * (1 + Math.SQRT1_2) - ringWidth / 2;
+  const badgeColor = ringColor ?? (ringVariant === 'banded' && tone == null ? theme.colors.success : tone === 'success' ? theme.colors.success : tone === 'warning' ? theme.colors.warning : tone === 'error' ? theme.colors.error : theme.colors.primary);
+
+  // The ring and the text are one screen-reader element (name, percent);
+  // the trailing slot stays outside it so an Edit link in there remains
+  // focusable on its own. An `accessible` root would swallow it.
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [styles.root, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.summary,
+      accessible: true,
+      accessibilityRole: "summary",
+      accessibilityLabel: a11yLabel,
+      accessibilityValue: {
+        min: 0,
+        max: 100,
+        now: percent
+      },
+      testID: `${idBase}-summary`,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: {
+          width: ringSize,
+          height: ringSize
+        },
+        children: [/*#__PURE__*/_jsx(ProgressRing, {
+          progress: clampedPercent / 100,
+          size: ringSize,
+          strokeWidth: ringWidth,
+          tone: tone ?? 'primary',
+          ringColor: ringColor,
+          colorByProgress: ringVariant === 'banded' && tone == null && ringColor == null,
+          animated: animated,
+          testID: `${idBase}-ring`,
+          children: /*#__PURE__*/_jsx(Avatar, {
+            name: title,
+            source: source,
+            ImageComponent: ImageComponent,
+            size: size,
+            tone: avatarTone,
+            backgroundColor: avatarBackgroundColor,
+            color: avatarColor,
+            accessibilityLabel: `${title}'s avatar`
+          })
+        }), complete ? /*#__PURE__*/_jsx(View, {
+          pointerEvents: "none",
+          style: [styles.badge, {
+            width: badgeSize,
+            height: badgeSize,
+            borderRadius: badgeSize / 2,
+            ...smoothCorners,
+            left: badgeCentre - badgeSize / 2,
+            top: badgeCentre - badgeSize / 2,
+            backgroundColor: theme.colors.background.elevated
+          }],
+          testID: `${idBase}-complete-badge`,
+          children: /*#__PURE__*/_jsx(AppIcon, {
+            name: "verify",
+            variant: "bold",
+            size: badgeSize - 2,
+            color: badgeColor
+          })
+        }) : null]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.body,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.title, titleStyle],
+          numberOfLines: 2,
+          children: title
+        }), subtitle ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.subtitle, subtitleStyle],
+          numberOfLines: 1,
+          children: subtitle
+        }) : null, description ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.description, descriptionStyle],
+          children: description
+        }) : null]
+      })]
+    }), trailing != null ? /*#__PURE__*/_jsx(View, {
+      style: styles.trailing,
+      children: trailing
+    }) : null]
+  });
+});
+ProfileCompletion.displayName = 'ProfileCompletion';
+const buildStyles = theme => StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    columnGap: theme.spacing.md
+  },
+  summary: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    columnGap: theme.spacing.md
+  },
+  body: {
+    flex: 1,
+    rowGap: 2
+  },
+  badge: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  title: {
+    fontSize: theme.typography.fontSize.xl,
+    lineHeight: theme.typography.fontSize.xl * theme.typography.lineHeight.tight,
+    color: theme.colors.text.primary,
+    ...fontFor(theme, 'semibold')
+  },
+  subtitle: {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.text.tertiary,
+    textTransform: 'uppercase',
+    letterSpacing: theme.typography.letterSpacing.wide,
+    ...fontFor(theme, 'medium')
+  },
+  description: {
+    fontSize: theme.typography.fontSize.base,
+    color: theme.colors.text.secondary,
+    ...fontFor(theme, 'normal')
+  },
+  trailing: {
+    alignSelf: 'flex-start'
+  }
+});
+export { ProfileCompletion };
+export default ProfileCompletion;
+//# sourceMappingURL=ProfileCompletion.js.map

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

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