@webority-technologies/mobile-ui 0.0.1

package/lib/commonjs/components/FormField/FormField.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FormField = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _FormContext = require("../../form/FormContext.js");
+var _index = require("../../theme/index.js");
+var _index2 = require("../FieldBase/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const FormField = exports.FormField = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    label,
+    helperText,
+    error,
+    required = false,
+    name,
+    children,
+    layout = 'stacked',
+    labelStyle,
+    helperStyle,
+    errorStyle,
+    containerStyle,
+    inputContainerStyle: inputContainerStyleProp,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const formCtx = (0, _FormContext.useOptionalFormContext)();
+  const isConnected = name != null && formCtx != null;
+  const field = isConnected ? formCtx.getFieldProps(name) : null;
+  const isRenderProp = typeof children === 'function';
+
+  // Error the FormField renders itself. When connected to an element child the
+  // child (Input/Select etc.) shows the injected error, so FormField stays
+  // quiet to avoid a duplicate message; the render-prop form keeps it here.
+  const ownError = isConnected ? isRenderProp ? field?.error : undefined : error;
+  // Error used purely for assistive tech — always reflects the real error.
+  const a11yError = isConnected ? field?.error : error;
+  const errorOpacity = (0, _react.useRef)((0, _index.createAnimatedValue)(ownError ? 1 : 0)).current;
+  (0, _react.useEffect)(() => {
+    const anim = _reactNative.Animated.timing(errorOpacity, {
+      toValue: ownError ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [ownError, errorOpacity, theme.motion.duration.fast]);
+  const computedAccessibilityLabel = (0, _react.useMemo)(() => {
+    if (accessibilityLabel) {
+      return accessibilityLabel;
+    }
+    if (!label) {
+      return undefined;
+    }
+    return a11yError ? `${label}, error: ${a11yError}` : label;
+  }, [accessibilityLabel, label, a11yError]);
+  const labelNode = label ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+    style: [styles.label, layout === 'inline' ? styles.labelInline : null, labelStyle],
+    children: [label, required ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.RequiredMark, {}) : null]
+  }) : null;
+  const inputContainerStyle = layout === 'inline' ? styles.inputInline : styles.inputStacked;
+  const showError = Boolean(ownError);
+  const showHelper = !showError && Boolean(helperText);
+  const renderedChildren = (() => {
+    if (isRenderProp) {
+      return field ? children(field) : null;
+    }
+    if (isConnected && field && /*#__PURE__*/_react.default.isValidElement(children)) {
+      const child = children;
+      const childOnChangeText = child.props.onChangeText;
+      const childOnBlur = child.props.onBlur;
+      const childOnFocus = child.props.onFocus;
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        value: field.value,
+        onChangeText: text => {
+          field.onChangeText(text);
+          childOnChangeText?.(text);
+        },
+        onBlur: e => {
+          field.onBlur();
+          childOnBlur?.(e);
+        },
+        onFocus: e => {
+          field.onFocus();
+          childOnFocus?.(e);
+        },
+        error: field.error,
+        ref: node => formCtx.registerField(name, node ?? null)
+      });
+    }
+    return children;
+  })();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ref: ref,
+    style: [layout === 'inline' ? styles.rootInline : styles.rootStacked, containerStyle],
+    accessibilityLabel: computedAccessibilityLabel
+    // RN's AccessibilityState type has no `invalid` field, so the error is
+    // folded into the label and surfaced again via the hint.
+    ,
+    accessibilityHint: a11yError ? a11yError : undefined,
+    testID: testID,
+    children: [labelNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [inputContainerStyle, inputContainerStyleProp],
+      children: renderedChildren
+    }), showHelper ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.helper, helperStyle],
+      numberOfLines: 2,
+      children: helperText
+    }) : null, ownError ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Text, {
+      style: [styles.error, {
+        opacity: errorOpacity
+      }, errorStyle],
+      numberOfLines: 2,
+      accessibilityLiveRegion: "polite",
+      children: ownError
+    }) : null]
+  });
+});
+FormField.displayName = 'FormField';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  rootStacked: {
+    flexDirection: 'column',
+    gap: theme.spacing.xs
+  },
+  rootInline: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: theme.spacing.xs
+  },
+  label: {
+    fontSize: theme.typography.fontSize.sm,
+    ...(0, _index.fontFor)(theme, 'medium'),
+    color: theme.colors.text.secondary
+  },
+  labelInline: {
+    width: theme.components.formField?.inlineLabelWidth ?? '35%'
+  },
+  inputStacked: {
+    width: '100%'
+  },
+  inputInline: {
+    flex: 1,
+    minWidth: 0
+  },
+  helper: {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.text.tertiary
+  },
+  error: {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.error
+  }
+});
+var _default = exports.default = FormField;
+//# sourceMappingURL=FormField.js.map

package/lib/commonjs/components/FormField/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FormField", {
+  enumerable: true,
+  get: function () {
+    return _FormField.FormField;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _FormField.default;
+  }
+});
+var _FormField = _interopRequireWildcard(require("./FormField.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/IconButton/IconButton.js

@@ -0,0 +1,180 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.IconButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _usePressAnimation = require("../../hooks/usePressAnimation.js");
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/index.js");
+var _index3 = require("../Spinner/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const SIZE_MAP = {
+  sm: {
+    diameter: 32,
+    icon: 16
+  },
+  md: {
+    diameter: 40,
+    icon: 20
+  },
+  lg: {
+    diameter: 48,
+    icon: 24
+  }
+};
+const toneFor = (theme, tone) => {
+  switch (tone) {
+    case 'secondary':
+      return {
+        base: theme.colors.secondary,
+        on: theme.colors.onSecondary,
+        fg: theme.colors.secondary
+      };
+    case 'success':
+      return {
+        base: theme.colors.success,
+        on: theme.colors.onSuccess,
+        fg: theme.colors.success
+      };
+    case 'warning':
+      return {
+        base: theme.colors.warning,
+        on: theme.colors.onWarning,
+        fg: theme.colors.warning
+      };
+    case 'error':
+      return {
+        base: theme.colors.error,
+        on: theme.colors.onError,
+        fg: theme.colors.error
+      };
+    case 'neutral':
+      return {
+        base: theme.colors.background.tertiary,
+        on: theme.colors.text.primary,
+        fg: theme.colors.text.primary
+      };
+    case 'primary':
+    default:
+      return {
+        base: theme.colors.primary,
+        on: theme.colors.onPrimary,
+        fg: theme.colors.primary
+      };
+  }
+};
+const IconButton = exports.IconButton = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    icon,
+    onPress,
+    accessibilityLabel,
+    tone = 'primary',
+    variant = 'solid',
+    size = 'md',
+    shape = 'circle',
+    active = false,
+    disabled = false,
+    loading = false,
+    haptic,
+    style,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const sizeCfg = SIZE_MAP[size];
+  const isDisabled = disabled || loading;
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = (0, _usePressAnimation.usePressAnimation)({
+    scaleTo: 0.92,
+    enabled: !isDisabled
+  });
+  const {
+    base,
+    on,
+    fg
+  } = toneFor(theme, tone);
+  const effectiveVariant = active ? 'solid' : variant;
+  let backgroundColor = 'transparent';
+  let borderColor = 'transparent';
+  let borderWidth = 0;
+  let iconColor = isDisabled ? theme.colors.text.disabled : fg;
+  if (effectiveVariant === 'solid') {
+    backgroundColor = isDisabled ? theme.colors.surface.disabled : base;
+    iconColor = isDisabled ? theme.colors.text.disabled : on;
+  } else if (effectiveVariant === 'soft') {
+    backgroundColor = isDisabled ? theme.colors.surface.disabled : `${base}22`;
+  } else if (effectiveVariant === 'outline') {
+    borderColor = isDisabled ? theme.colors.border.primary : base;
+    borderWidth = theme.colors.border.width;
+  }
+  const radius = shape === 'circle' ? sizeCfg.diameter / 2 : theme.radius.md;
+  const handlePress = e => {
+    if (isDisabled) {
+      return;
+    }
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index2.triggerHaptic)(h);
+    }
+    onPress?.(e);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    ref: ref,
+    onPress: handlePress,
+    onPressIn: pressIn,
+    onPressOut: pressOut,
+    disabled: isDisabled,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      disabled: isDisabled,
+      selected: active
+    },
+    hitSlop: 6,
+    testID: testID,
+    style: ({
+      pressed
+    }) => [styles.base, {
+      width: sizeCfg.diameter,
+      height: sizeCfg.diameter,
+      borderRadius: radius,
+      backgroundColor,
+      borderColor,
+      borderWidth,
+      opacity: pressed && effectiveVariant !== 'solid' ? 0.7 : 1
+    }, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.content, {
+        transform: [{
+          scale
+        }]
+      }],
+      children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Spinner, {
+        size: "sm",
+        color: iconColor
+      }) : typeof icon === 'function' ? icon({
+        color: iconColor,
+        size: sizeCfg.icon
+      }) : icon
+    })
+  });
+});
+IconButton.displayName = 'IconButton';
+const styles = _reactNative.StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  content: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+var _default = exports.default = IconButton;
+//# sourceMappingURL=IconButton.js.map

package/lib/commonjs/components/IconButton/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function () {
+    return _IconButton.IconButton;
+  }
+});
+var _IconButton = require("./IconButton.js");
+//# sourceMappingURL=index.js.map