@webority/mobile-ui 0.0.39 → 0.1.0

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

@@ -1,146 +1 @@
-"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
+import e,{forwardRef as l,useMemo as i}from"react";import{StyleSheet as t,Text as r,View as o}from"react-native";import{useTheme as s}from"../../theme/index.js";import{FieldBase as n,FieldLabel as a,FieldMessage as c,fieldTextAsString as d,hasFieldText as y,RequiredMark as b,resolveFieldSize as u,resolveFieldTextStyle as g}from"../FieldBase/index.js";import{Chevron as m}from"../FieldBase/Chevron.js";import{jsx as h,jsxs as p}from"react/jsx-runtime";const x=l((e,l)=>{const{value:t,placeholder:x,label:f,help:S,helperText:z,error:v,required:P=!1,onPress:j,clearable:w=!1,onClear:F,leadingIcon:C,trailing:I,disabled:L=!1,size:R="md",variant:T,style:D,triggerStyle:q,valueStyle:B,labelStyle:N,messageStyle:$,accessibilityLabel:k,testID:H}=e,O=s(),A=i(()=>buildStyles(O),[O]),E=u(O,R),G=g(O,{disabled:L}),J="string"==typeof t&&t.length>0,K=y(v),M=y(f),Q=J?t:x??"Select…",U=J?G.color:G.placeholderColor,V=J?`${d(f)??"Selection"}: ${t}`:x??"No selection",W=k??V,X={disabled:L},Y=void 0===I,Z=w&&J&&!L;return p(o,{style:[A.root,D],testID:H,children:[M?h(a,{size:R,required:P,help:S,style:N,children:f}):null,h(n,{size:R,variant:T,disabled:L,error:K,filled:J,onPress:j,leading:C,trailing:Z||Y||null!==I?p(o,{style:A.trailingRow,children:[Z?h(r,{onPress:()=>{L||F?.()},accessibilityRole:"button",accessibilityLabel:"Clear",style:{fontSize:E.iconSize,color:O.colors.text.secondary,paddingHorizontal:4},children:"×"}):null,void 0!==I?I:Y?h(m,{size:E.iconSize,color:L?O.colors.text.disabled:O.colors.text.tertiary}):null]}):null,accessibilityLabel:W,accessibilityState:X,accessibilityRole:"button",style:q,children:p(r,{numberOfLines:1,style:[A.valueText,{color:U,fontSize:E.fontSize,...G.weightStyle},B],children:[Q,J||!P||M?null:h(b,{})]})}),h(c,{size:R,error:K,text:K?v:z,style:$})]})});x.displayName="PickerTrigger";const buildStyles=e=>t.create({root:{width:"100%"},label:{includeFontPadding:!1},valueText:{flex:1,includeFontPadding:!1},message:{includeFontPadding:!1},trailingRow:{flexDirection:"row",alignItems:"center"}});export{x as PickerTrigger};export default x;

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

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

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

@@ -1,211 +1 @@
-"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
+import{forwardRef as e,useMemo as t}from"react";import{StyleSheet as r,Text as o,View as i}from"react-native";import{fontFor as n,useTheme as l}from"../../theme/index.js";import{smoothCorners as s}from"../../utils/corners.js";import{AppIcon as a}from"../AppIcon/index.js";import{Avatar as c}from"../Avatar/index.js";import{ProgressRing as m}from"../ProgressRing/index.js";import{jsx as p,jsxs as d}from"react/jsx-runtime";const g=56,y=1,u=e((e,r)=>{const{progress:n,title:u,subtitle:h,description:b,source:f,ImageComponent:x,size:S=g,avatarTone:z="neutral",avatarBackgroundColor:C,avatarColor:I,ringWidth:v,ringGap:w=y,ringVariant:j="banded",tone:D,ringColor:k,animated:M=!0,showCompleteBadge:$=!0,trailing:L,accessibilityLabel:R,style:G,titleStyle:N,subtitleStyle:B,descriptionStyle:P,testID:T}=e,W=l(),A=t(()=>buildStyles(W),[W]),H=v??W.components.progressRing?.strokeWidth??3,O=S+2*(w+H),V=Math.min(100,Math.max(0,Number.isNaN(n)?0:n)),E=Math.round(V),Q=R??`${u}, profile ${E}% complete`,_=T??"profile-completion",q=$&&V>=100,F=Math.max(16,Math.round(.3*O)),J=O/2*(1+Math.SQRT1_2)-H/2,K=k??("banded"===j&&null==D||"success"===D?W.colors.success:"warning"===D?W.colors.warning:"error"===D?W.colors.error:W.colors.primary);return d(i,{ref:r,style:[A.root,G],testID:T,children:[d(i,{style:A.summary,accessible:!0,accessibilityRole:"summary",accessibilityLabel:Q,accessibilityValue:{min:0,max:100,now:E},testID:`${_}-summary`,children:[d(i,{style:{width:O,height:O},children:[p(m,{progress:V/100,size:O,strokeWidth:H,tone:D??"primary",ringColor:k,colorByProgress:"banded"===j&&null==D&&null==k,animated:M,testID:`${_}-ring`,children:p(c,{name:u,source:f,ImageComponent:x,size:S,tone:z,backgroundColor:C,color:I,accessibilityLabel:`${u}'s avatar`})}),q?p(i,{pointerEvents:"none",style:[A.badge,{width:F,height:F,borderRadius:F/2,...s,left:J-F/2,top:J-F/2,backgroundColor:W.colors.background.elevated}],testID:`${_}-complete-badge`,children:p(a,{name:"verify",variant:"bold",size:F-2,color:K})}):null]}),d(i,{style:A.body,children:[p(o,{style:[A.title,N],numberOfLines:2,children:u}),h?p(o,{style:[A.subtitle,B],numberOfLines:1,children:h}):null,b?p(o,{style:[A.description,P],children:b}):null]})]}),null!=L?p(i,{style:A.trailing,children:L}):null]})});u.displayName="ProfileCompletion";const buildStyles=e=>r.create({root:{flexDirection:"row",alignItems:"center",columnGap:e.spacing.md},summary:{flex:1,flexDirection:"row",alignItems:"center",columnGap:e.spacing.md},body:{flex:1,rowGap:2},badge:{position:"absolute",alignItems:"center",justifyContent:"center"},title:{fontSize:e.typography.fontSize.xl,lineHeight:e.typography.fontSize.xl*e.typography.lineHeight.tight,color:e.colors.text.primary,...n(e,"semibold")},subtitle:{fontSize:e.typography.fontSize.sm,color:e.colors.text.tertiary,textTransform:"uppercase",letterSpacing:e.typography.letterSpacing.wide,...n(e,"medium")},description:{fontSize:e.typography.fontSize.base,color:e.colors.text.secondary,...n(e,"normal")},trailing:{alignSelf:"flex-start"}});export{u as ProfileCompletion};export default u;

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

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